• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Selectmenu

Page history last edited by Scott González 9 years, 8 months ago

type: widget

release: 1.11

status: released

documentation: http://api.jqueryui.com/selectmenu/

demo: http://jqueryui.com/selectmenu/

 


 

1 - Description:

 

A jQuery UI widget that duplicates and extends the functionality of a native HTML select element, allowing it to be customizable in behavior and appearance far beyond the limitations of a native select. For multiple selection, please use Multiselect Widget instead.

 


 

2 - Visual Design:

 

 


 

 

3 - Functional Specification:

 

Feature details:

  • selectmenu will act as a proxy back to the original select element, controlling its state for form submission or serialization 
  • Any form label originally associated with the select menu will be associated with the new form control, by forwarding the click event on the original select (as long as the label's for-attribute matches the select's id-attribute).
  • The menu will support both in-place "popup" or drop-down styles
  • The menu will be fully keyboard accessible using matching conventions to native select elements
    • Closed
      • cursor up: focus the previous item; if first item is focused, do nothing
      • cursor down: focus the next item; if last item is focused, do nothing
      • cursor left/right: same as up/down
      • page up: focus the first item in the previous page
      • page down: focus the first item in the next page 
      • end: focus last item
      • home: focus first item
      • alt+cursor up/down: toggle the menu
      • space: open the menu
      • enter: does nothing (does not submit forms) 
    • Opened        
      • cursor up: focus the previous item; if first item is focused, do nothing
      • cursor down: focus the next item; if last item is focused, do nothing
      • cursor left/right: same as up/down
      • page up: focus the first item in the previous page
      • page down: focus the first item in the next page 
      • end: focus last item
      • home: focus first item 
      • enter/space: select the currently focused item and close the menu 
      • alt+cursor up/down: toggle the menu
      • escape: close the menu
  • The menu will have ARIA support for screenreaders so the original select element can safely be hidden from all users 
  • The presentation menu is built based on labels and values of the wrapped select. Custom presentations are possible.
  • The min-width of the menu is the width of the input.
  • The max-height of the menu can be controlled via CSS, or, if necessary, via JS customizations  
  • For render customizations, e.g., custom background images for each item, the widget provides _renderMenu() and _renderItem(), like autocomplete does. Users can override these, e.g., override _renderMenu() and use a template to output the markup.
  • Type-ahead, as built-in into menu.
  • Optgroup support just like native select does, with a flat list with group headers
    • Optional: Render groups as nested lists, making each group a popup menu, with the top-level item the group's header
  • Disabling individual options or optgroups happens by updating the original select, then calling the refresh() method on the widget. 
  • While selectmenu updates the underlying select element, it doesn't trigger any events on that element, e.g., change. If other components rely on that event, you have to build the integration manually.

 

Not supported:

  • Initializing from something that isn't a select-element.
    • We should eventually look into other data sources, such as datalists and arrays.  

 

4 - Markup & Style:

 

(only used prior to implementation)

 


 

5 - Latest version of plugin:

 

http://view.jqueryui.com/master/demos/selectmenu/default.html


 

6 - Open issues being discussed

 

 

 

Tabled/deferred

  • Should we have an option for scrollbarless slick scrolling (arrows at top and bottom and list scrolls dynamically with mouse position)?
    • Should be an option of menu, not selectmenu. Not planned right now.   
  • Mobile browser support: jQuery Mobile provides a good reference implementation for now, eventually we should be able to merge parts of both frameworks back together. 
    • review below 
  • Disabling menu's built-in wrapping might be interesting. Ignoring that for now. This was addressed 
  • Figure out how to deal with empty optgroup elements. Currently not getting displayed.
  • Popup style via an extension (see here)

 

 

jQuery Mobile compare


Differs from UI Selectmenu:

  • Different modes: Open original option list or show custom menu
  • Visual grouping of multiple selects
  • A lot of built-in styling options
  • Option setting works via attributes
  • Placeholder functionality
  • Multiple selection possible
  • Almost no callbacks
  • No positioning options


Issues in Mobile Selectmenu

  • Not keyboard accessible (for non IE)
  • Some critical cross browser issues (especially with the non native menu)
  • Screenreader issues (quick test latest FF with NVDA)
    • Native menu: button is never announced, menu works nice as its native
    • Custom menu: button is sometimes announced correct, menu works pretty nice


Possible merge problems:

  • Different handling of the native select (both native and custom menu)
  • Handling of long (overflow) lists is not suitable for desktop applications
  • Multiple selection was planned as a standalone widget for UI (Multiselect) as its a quite different usecase
  • A lot of dependencies to other jQuery Mobile components

 

 

Comments (8)

fnagel said

at 4:45 pm on Nov 10, 2013

I've added a new branch which includes a WIP of selectmenu with native menu supports.

It has some issues as expected. Most of the a11y issues I've noticed in Mobile select seems due to technical limitations. For example it seems not possible to prevent a event from fire the default action when a select has focus. Another issue is that it seems there is no possibility to notice when a native select menu is closed (without selecting an option).

Other screenreader related issue could probably be fixed by playing around with ARIA attributes. Feedback wanted, see: https://github.com/jquery/jquery-ui/tree/selectmenu-native-menu

I'm currently working on another idea how to make a native menu support possible.

Alex Schmitz said

at 11:34 am on Dec 18, 2013

some results from some testing on a few dozen devices

ipad ios6 , iphone 4 iOS 6
tapping out to close only rarely works
some times after closing one menu you need to tap twice to open another one

iphone 4 iOS 6
extra space between menu and button after orientation change


htc thunderbolt 4g android 2.3 ,
galaxy s4 android 4.2, nexus 4 android 4.2, motorola atrix android 4.0, sony experia u android 4.0, nokia lumia 920/520 windows phone 8
active state applied when scrolling long list
dragging on an option will give active state without closing or actually selecting anything

htc thunderbolt 4g android 2.3, lg optimus android 2.2
menu cut off at 11 and can’t scroll

lumia 920/520 windows phone 8
scrolling to show menu that overflows screen closes menu
entire menu flashes active state when you select an option

fnagel said

at 4:38 am on Feb 18, 2014

Tapping out problem confirmed for iOS7 (pad and phone), too.
iPhone (iOS7) extra space after orientation change issue confirmed for Safari and Chrome.

HTC One V (Android 4.2.2) with default browser and FF: works without issues


Jörn Zaefferer said

at 12:36 pm on Jan 7, 2014

There's a test failure in IE7, in the "selectmenu: options: Width" test, see http://swarm.jquery.org/result/1456020 - I could reproduce this in BrowserStack.

Felix, can you look into that?

fnagel said

at 6:13 pm on Jan 12, 2014

I'm able to reproduce this issue when using IE VMs with a IE > 7.

I'm currently using outerWidth as a setter which seems a invalid usage (at least the docs explain a getter only). Any idea why this works in all browsers but IE7? It works when using "real" inline CSS so this is more like a testing issue.

I could try to inject a style tag width the CSS instead of using outerWidth as a setter. Would this be a valid method to dynamically change CSS in a test?

Jörn Zaefferer said

at 11:46 am on Jan 13, 2014

outerWidth is a setting since jQuery Core 1.8, but that was never documented in the their API docs, see: https://github.com/jquery/api.jquery.com/issues/98 To support older jQuery versions, jquery.ui.core.js still bundles a polyfill for a outerWidth setter.

I don't know why it fails only in IE7 or why inline CSS would work better. I don't quite understand the suggestion involving a style tag - if that's simple enough, could you put together a PR for that? Btw. PRs are generally good for anything that is supposed to land in master.

Scott González said

at 4:44 pm on Jan 22, 2014

I spent some time digging into this today and it's a problem with the getter in jQuery core. Dave will be looking into it and pointed to http://bugs.jquery.com/ticket/4146 as a similar issue.

fnagel said

at 12:41 pm on Feb 5, 2014

You don't have permission to comment on this page.