issue selecting an item from dropdown list (select2)

[cabiste007]

What are you trying to achieve?

I want to select an option from select2

What do you get instead?

I used the select2 v3.5 but didn't get any succes try

I've tried this code and the one commented also without any result

 $I->openSelect2("#select2-hotel-container");
//getting the same error output
//trynig this code also give me the same error
//        $I->click('#select2-hotel-container');
//        $I->fillField('input.select2-search__field', 'Gil');
//        $I->wait(2);
//        $I->selectOptionForSelect2("#select2-hotel-container",['text' => 'Gil de France'],10);

Details

here is my select it's dynamic one with search filed

<div class="form-group">
 <select type="text" class="form-control select2-hidden-accessible" id="hotel" name="hotel" required="" data-endpoint="/ajax-search-hotel" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;">
<span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-hotel-container" aria-owns="select2-hotel-results">
<span class="select2-selection__rendered" id="select2-hotel-container"><span class="select2-selection__placeholder">Saisissez le nom de l'hôtel *</span></span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="false"></span></span>
 <input id="hotel-name" name="hotel-name" type="hidden">
                                        </div>

and down of the html page I had this

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 623.55px; left: 799.6px;">
<span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 383.067px;">
<span class="select2-search select2-search--dropdown">
<input class="select2-search__field" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" type="search"></span>
<span class="select2-results">
<ul class="select2-results__options" role="tree" id="select2-hotel-results" aria-expanded="true" aria-hidden="false">
<li class="select2-results__option select2-results__option--highlighted" role="treeitem" aria-selected="false">Gil de France</li>
</ul></span></span></span>

please guys I need your help I'm blocede now for there days and thanks in advance

[Naktibalda]

What is Select2?

[cabiste007]

this one: https://gist.github.com/tortuetorche/412fbac4f17db5e78e79
because I tried this
$I->selectOption('#select2-hotel-container', 'Gil de France');

it fait

Ps: all others suggestion to select option from this kind of dropdown list are welcome :)

[Naktibalda]

Are you using code from the top or the bottom of the gist?
Comment says that original code is not compatible with recent versions of Select2.
Anyway, I recommend asking for help in comments of that gist.

[cabiste007]

ok thanks naktibalda !! have you any other idea to make codeception select this option !!

[jha1395]

Hey you can use "selectOption" for select option value. before this script you will have to use "wait" function.

[DavertMik]

Current guideline for dealing with custom selectboxes:

1. try to use selectOption. If it's incompatible, then
2. open documentation for the selectbox JS library and see how you can set its value via JavaScript
3. use executeJS and call the function to set value
4. move this execut JS into an actor class so you could call wherever you need it.

[SOHELAHMED7]

If you are using Select2, implementation of #5135 (comment) is:

    public function selectSelect2Options(string $selector, array $options)
    {
        foreach ($options as $option) {
            $this->seeElementInDOM(Locator::combine($selector . ' option[value=' . $option . ']', '#not-exist-7985-anything'));
        }
        $optionsAsJs = count($options) > 1 ? ('"' . implode('", "', $options) . '"') : "'$options[0]'";

        $jsStr = "var sel = $('$selector');
            sel.val([$optionsAsJs]);
            sel.trigger('change');";

        $this->executeJS($jsStr);
    }

Also this method will throw error if any option is not found.

Example usage:

$I->selectSelect2Options('#states', ['GJ', 'MH', 'KL']);