Expanding a combobox

[freightgateone]

Hello there.
I am seriously questioning my sanity right now.
I have expanded the dropdown list of a combobox before but this time I can not get my head around why this does not work.
See the following code;

ST.comboBox('formBuilder[itemId="contract_maintenance_add_form"] combo[itemId="favEntriesCombo"]')
        .expand();

When using the inspect tool after this line of code it is clearly visible that ST has located the designated combobox,
as the combobox gets focused with a 'blinking cursor' just like if you would want to type text in there.

The test does not throw errors nor crashes but rather has a different outcome as I'd expect from it.

Here's the HTML snippet of the comboBox:

<div class="x-field x-form-item x-form-item-default x-form-type-text x-box-item x-toolbar-item x-field-default x-hbox-form-item x-form-item-no-label" style="width: 150px; left: 239px; top: 0px; margin: 0px;" role="presentation" id="combo-2655">
    <label id="combo-2655-labelEl" data-ref="labelEl" class="x-form-item-label x-form-item-label-default x-unselectable" style="padding-right:5px;width:105px;" for="combo-2655-inputEl">
        <span class="x-form-item-label-inner x-form-item-label-inner-default" style="width:100px">
            <span id="combo-2655-labelTextEl" data-ref="labelTextEl" class="x-form-item-label-text"></span>
        </span>
    </label>
    
    <div id="combo-2655-bodyEl" data-ref="bodyEl" role="presentation" class="x-form-item-body x-form-item-body-default x-form-text-field-body x-form-text-field-body-default ">
        <div id="combo-2655-triggerWrap" data-ref="triggerWrap" role="presentation" class="x-form-trigger-wrap x-form-trigger-wrap-default">
            <div id="combo-2655-inputWrap" data-ref="inputWrap" role="presentation" class="x-form-text-wrap x-form-text-wrap-default">
                <input id="combo-2655-inputEl" data-ref="inputEl" type="text" size="1" name="combo-2655-inputEl" aria-hidden="false" aria-disabled="false" role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="combo-2655-inputEl combo-2655-picker-listEl" aria-autocomplete="list" aria-invalid="false" aria-readonly="false" aria-describedby="combo-2655-ariaStatusEl" aria-required="false" class="x-form-field x-form-text x-form-text-default  x-form-empty-field x-form-empty-field-default" autocomplete="off" data-componentid="combo-2655" aria-activedescendant="ext-2511">
            </div>
            <div id="combo-2655-trigger-picker" class="x-form-trigger x-form-trigger-default x-form-arrow-trigger x-form-arrow-trigger-default " role="presentation"></div>
        </div>
        <span id="combo-2655-ariaStatusEl" data-ref="ariaStatusEl" aria-hidden="true" class="x-hidden-offsets"></span>
        <span id="combo-2655-ariaErrorEl" data-ref="ariaErrorEl" aria-hidden="true" aria-live="assertive" class="x-hidden-clip"></span>
    </div>
</div>

[daniel.gallo]

What happens exactly, when you call "expand" - does it not show any drop-down?

Is it a remotely loaded combobox? What happens if you add a short delay before calling "expand"?

[freightgateone]

After executing the .expand()-Method the combobox switches from its regular, 'unselected' state Attachment 58103

To a selected one Attachment 58104 as if you clicked on it in order to type text in there.

Adding wait() statements before each step results in the same behaviour.

[daniel.gallo]

It's most likely a remote combobox then - where data isn't loaded in to the underlying Combobox's data store until the trigger is clicked or you start typing text in the field, at which point data is then fetched from the server. The "expand" API in Sencha Test behind the scenes uses an Ext JS API to show the picker, but it doesn't trigger the load of the data so that's why you aren't seeing anything, because there is no data.

In order to trigger the load of the data and show the picker, try interacting with remote comboboxes using this approach - by clicking on the actual expand trigger/button:

ST.element('formBuilder[itemId="contract_maintenance_add_form"] combo[itemId="favEntriesCombo"] => .x-form-trigger')
    .click();