Select2 from Ajax can't selected

[moysoft]

#Steps to reproduce the issue

1. In view

$url = \yii\helpers\Url::to(['/periksa/karyawan-list']);
...
<div class="row">
      <div class="col-md-12">
         <?= $form->field($model, 'nama_terperiksa')->widget(Select2::classname(), [
             'options' => ['multiple' => false, 'placeholder' => 'Search for employee ...'],
              'pluginOptions' => [
              'allowClear' => true,
              'minimumInputLength' => 3,
              'language' => [
              'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"), ],
                  'ajax' => [
                     'url' => $url,
                      'dataType' => 'json',
                      'data' => new JsExpression('function(params) { return {q:params.term}; }')
                  ],
              'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
               'templateResult' => new JsExpression('function(name) { return name.name; }'),
               'templateSelection' => new JsExpression('function (name) { return name.name; }'),
                    ],
                  ]);

             ?>
     </div>
</div>

2. in Controller :

public function actionKaryawanList($q = null, $id = null)
    {
        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        
        $out = ['results' => ['name' => '', 'nik' => '', 'email' => '']];
        if (!is_null($q)) {

            $urlTarget = 'https://sso.somesite.com/api/master/getKaryawan/' . $q . '/Th151stH3kEy';
            $response = file_get_contents($urlTarget);

            $data  = json_decode($response, TRUE);
            unset($response);
            unset($data["status"]);
            $out['results'] = array_values($data['result']);

            // } elseif ($id > 0) {
            //     $out['results'] = ['id' => $id, 'text' => City::find($id)->name];
        }

        return $out;
    }

Expected behavior and actual behavior

When I follow those steps, I see...

https://prnt.sc/rwykv9

I can't select the list, and the list background color is yellow

I was expecting...
I can select the list, and the list background color is white

Environment

Browsers

• Google Chrome

Operating System

• Windows

Libraries

• jQuery version: v2.2.4
• yii2-widgets version: 3.4.1

[AbdulRahmanAbouzaid]

I had the same issue and found that select2 is adding the following class select2-results__option--selectable to options so it can be selected.
By reviewing the js code, I found that class maybe removed for some reasons:

• If the options is disabled:

if ((data.element != null && matches.call(data.element, ':disabled')) ||
        (data.element == null && data.disabled)) {
      attrs['aria-disabled'] = 'true';

      option.classList.remove('select2-results__option--selectable');
      option.classList.add('select2-results__option--disabled');
}

• If id is missing from response (that was my case):
  select2 expects a "id" key to be returned in results which is being used as the option value that will be sent in post body:

if (data.id == null) {
      option.classList.remove('select2-results__option--selectable');
}

So your endpoint response fomat MUST be as the following:

{
    "results": [
          {
                "id": someId,
                ...
                ...
         },
        {
                "id": someId2,
                ...
                ...
         }
    ]
}

Of course it would be great if there's a way to identify the id key in widget initialization.

• If the option is the group heading (For example you're showing cities grouped by country so country name won't be selectable):

if (data.children) {
      attrs.role = 'group';
      attrs['aria-label'] = data.text;

      option.classList.remove('select2-results__option--selectable');
      option.classList.add('select2-results__option--group');
    }