Filter: Filtering a SELECT element causes unexpected experience

[RedWolves]

When I filter a select element as demo'd in the demos the select box goes blank if you choose anything but the first element.

Reduced Test Case - jQuery Mobile 1.4.0 alpha 1
Reduced Test Case - jQuery Mobile git

    <input data-type="search" id="searchselect">
    <select data-filter="true" data-input="#searchselect">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>        
    </select>

Steps to reproduce: Enter in "CSS" into the filter box, hit Enter.

Expected Results: "CSS" is displayed instead of HTML. Additionally, "CSS" is the only option listed.

Actual Results: The dropdown is blank but CSS is in the dropdown when you click the down arrow. Additionally, the last option is also listed, "JavaScript".

Platforms: Google Chrome 28 on Windows 8

Frameworks: jQuery 2.0.3, jQuery Mobile 1.4.0 alpha 1

Other Relevant information: This is also reproducible in the demos that come with the 1.4.0 zip file for the Filter Widget page. If you type in "Option B" you don't get a value in the dropdown box but when you click to expand you see both "Option B" and the last option "Option J"

[frequent]

@RedWolves : will have a look tonight. Thanks for reporting.

[RedWolves]

I am getting different experiences on different platforms. On Chrome 28 for Mac OSX Mountain Lion None of the options are hidden.

[frequent]

@uGoMobi: @RedWolves:
Noted that native select should probably have a min-height specified if no option is shown (analog to custom select).

[jaspermdegroot]

The problem is that we copy classes from the selected option to the span that contains the select button text. On the test page "HTML" is the selected option. This option gets class ui-screen-hidden as soon as you start typing "CSS" and so will the span. When the span is hidden the button no longer has height.

Let say we stop copying the classes or override the display: none; for the span. If you start typing "CSS" the button will still show "HTML" (because that is still the selected option) but that option will be hidden in the drop down list.

If we keep copying the classes we could do something with CSS to give the button height. You won't see "HTML" anymore at all, but it is still the selected option so it will be submitted when you send the form.

Test page: http://jsbin.com/esekic/16 (Edit: updated the test page because the first example had wrong ID)

I think that both solutions are confusing.

[frequent]

@gabrielschulhof: well done!