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

Selectmenu: Keyboard navigation idiosyncrasies #3184

Closed
mattkallman opened this Issue Nov 28, 2011 · 8 comments

Comments

@mattkallman

mattkallman commented Nov 28, 2011

A standard select will open when pressing a key to jump to options that start with that letter. A jQuery Mobile select will still change the value, but will not visibly display the options.

To reproduce:

  1. Visit http://jquerymobile.com/demos/1.0/docs/forms/selects/
  2. Tab to get the focus on the US States select element #select-choice-2
  3. Type the "L" key

A standard select would open the options and jump to "Louisiana". This select element is changing the value to Louisiana, but there is no visual indication that it is happening.

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Nov 28, 2011

Contributor

Hi! This would be new and I've tried on Safari 5.1 but a standard html-select does not open when pressing a key-value when it has the focus.
I've build a little jquery/jquery-mobile less demo at http://jsfiddle.net/MauriceG/5cWRv/show/

Contributor

MauriceG commented Nov 28, 2011

Hi! This would be new and I've tried on Safari 5.1 but a standard html-select does not open when pressing a key-value when it has the focus.
I've build a little jquery/jquery-mobile less demo at http://jsfiddle.net/MauriceG/5cWRv/show/

@netgfx

This comment has been minimized.

Show comment
Hide comment
@netgfx

netgfx Nov 28, 2011

I think the 'problem' here is that the displayed value does not change but the actual option has been selected.
This can be solved by extending the build object of the select menu in the JQM source like follows:

this.select
.appendTo( self.button )
.bind( "vmousedown", function() {
// Add active class to button
self.button.addClass( $.mobile.activeBtnClass );
})
.bind( "focus vmouseover", function() {
self.button.trigger( "vmouseover" );
})
.bind( "vmousemove", function() {
// Remove active class on scroll/touchmove
self.button.removeClass( $.mobile.activeBtnClass );
})
.bind( "change blur vmouseout", function() {
self.button.trigger( "vmouseout" )
.removeClass( $.mobile.activeBtnClass );
})
.bind( "change blur", function() {
self.button.removeClass( "ui-btn-down-" + self.options.theme );
})
.bind('keyup',function(event){
var selected = $("option:selected",this).text();
self.button.find('.ui-btn-text').text(selected);
});

This will change the value that is displayed to the corresponding inner select value.

Hope it helps.

netgfx commented Nov 28, 2011

I think the 'problem' here is that the displayed value does not change but the actual option has been selected.
This can be solved by extending the build object of the select menu in the JQM source like follows:

this.select
.appendTo( self.button )
.bind( "vmousedown", function() {
// Add active class to button
self.button.addClass( $.mobile.activeBtnClass );
})
.bind( "focus vmouseover", function() {
self.button.trigger( "vmouseover" );
})
.bind( "vmousemove", function() {
// Remove active class on scroll/touchmove
self.button.removeClass( $.mobile.activeBtnClass );
})
.bind( "change blur vmouseout", function() {
self.button.trigger( "vmouseout" )
.removeClass( $.mobile.activeBtnClass );
})
.bind( "change blur", function() {
self.button.removeClass( "ui-btn-down-" + self.options.theme );
})
.bind('keyup',function(event){
var selected = $("option:selected",this).text();
self.button.find('.ui-btn-text').text(selected);
});

This will change the value that is displayed to the corresponding inner select value.

Hope it helps.

@mattkallman

This comment has been minimized.

Show comment
Hide comment
@mattkallman

mattkallman Nov 29, 2011

MauriceG, you are right of course. I was mis-remembering today's standard web functionality in this scenario. netgfx your solution looks promising. We'll give it a try.

mattkallman commented Nov 29, 2011

MauriceG, you are right of course. I was mis-remembering today's standard web functionality in this scenario. netgfx your solution looks promising. We'll give it a try.

@netgfx

This comment has been minimized.

Show comment
Hide comment
@netgfx

netgfx Dec 13, 2011

The solution works as far as I have tested, I'll try and make a commit when possible.

netgfx commented Dec 13, 2011

The solution works as far as I have tested, I'll try and make a commit when possible.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Feb 18, 2012

Member

@toddparker this seems to be a duplicate of #348. We can probably keep only one of the two open?

Member

agcolom commented Feb 18, 2012

@toddparker this seems to be a duplicate of #348. We can probably keep only one of the two open?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 19, 2012

Contributor

@agcolom - Good catch. I'll keep this one open because it has a suggested fix.

Contributor

toddparker commented Feb 19, 2012

@agcolom - Good catch. I'll keep this one open because it has a suggested fix.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2012

Member

I closed #4040 as duplicate of this issue.

Member

jaspermdegroot commented Jul 16, 2012

I closed #4040 as duplicate of this issue.

@gabrielschulhof gabrielschulhof changed the title from select doesn't open on keypress to Selectmenu: Keyboard navigation idiosyncrasies Jun 10, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 10, 2014

Contributor

We've fixed the part where the select doesn't reflect its current value when that value has been chosen via keypress for the native menu. The non-native menu does not allow navigation via the keyboard.

I don't know of any way of dropping down a native select programmatically.

After some discussion, we've decided that it's not worth the effort and increase in complexity to make a non-native select imitate the behaviour of a native select, in that, upon keypress, it opens and starts highlighting an item based on what was typed.

Thus, the followings remain within scope for this issue:

  • The non-native menu must allow navigation via the keyboard.

    Note: We have this already

  • gabrielschulhof@cb51bfe When pressing a key while a native select is in focus, the item starting with the letter pressed is chosen, but the select loses focus, so continuing operation via the keyboard is impossible.

  • The non-native select does not allow one to choose an item by pressing a letter on the keyboard.

    Update: I don't believe this is possible, because we cannot "forward" keyboard events from the anchor to the select element, nor is there any reliable way of retrieving the character that was pressed from the keydown event in order to reproduce the browser's native way of searching through the entries.

Contributor

gabrielschulhof commented Jun 10, 2014

We've fixed the part where the select doesn't reflect its current value when that value has been chosen via keypress for the native menu. The non-native menu does not allow navigation via the keyboard.

I don't know of any way of dropping down a native select programmatically.

After some discussion, we've decided that it's not worth the effort and increase in complexity to make a non-native select imitate the behaviour of a native select, in that, upon keypress, it opens and starts highlighting an item based on what was typed.

Thus, the followings remain within scope for this issue:

  • The non-native menu must allow navigation via the keyboard.

    Note: We have this already

  • gabrielschulhof@cb51bfe When pressing a key while a native select is in focus, the item starting with the letter pressed is chosen, but the select loses focus, so continuing operation via the keyboard is impossible.

  • The non-native select does not allow one to choose an item by pressing a letter on the keyboard.

    Update: I don't believe this is possible, because we cannot "forward" keyboard events from the anchor to the select element, nor is there any reliable way of retrieving the character that was pressed from the keydown event in order to reproduce the browser's native way of searching through the entries.

@gabrielschulhof gabrielschulhof self-assigned this Jan 5, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 6, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 7, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 7, 2015

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