New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter: Filtering a SELECT element causes unexpected experience #6225

Closed
RedWolves opened this Issue Jul 29, 2013 · 5 comments

Comments

Projects
None yet
3 participants
@RedWolves
Member

RedWolves commented Jul 29, 2013

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jul 29, 2013

Contributor

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

Contributor

frequent commented Jul 29, 2013

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

@RedWolves

This comment has been minimized.

Show comment
Hide comment
@RedWolves

RedWolves Jul 30, 2013

Member

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

Member

RedWolves commented Jul 30, 2013

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

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jul 30, 2013

Contributor

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

Contributor

frequent commented Jul 30, 2013

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

@ghost ghost assigned jaspermdegroot Jul 31, 2013

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 1, 2013

Member

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.

Member

jaspermdegroot commented Aug 1, 2013

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Aug 14, 2013

Contributor

@gabrielschulhof: well done!

Contributor

frequent commented Aug 14, 2013

@gabrielschulhof: well done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment