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

• [x] Google Chrome

Operating System

• [x] 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');
  }