Dropdown doesn't respond to keyboard

[nxp2910]

If you open a dropdown that uses the mui-select class and try to type in an option, it won't select the typed option. In raw HTML5 and in Angular Material, when you type, it selects the typed option. Do you plan to implement this for MUI? I think this can be a major UX enhancement, because it's easy to use the keyboard if the dropdown has too many options. Thanks.

[amorey]

Done! The latest version of MUI (v0.9.12) allows you to jump to an option item by typing into the keyboard. There's also a 300 msec delay between keypresses to handle longer strings:
https://www.muicss.com/
https://www.npmjs.com/package/muicss

Thanks for the suggestion!

[nxp2910]

Thanks for the quick release,
I'd like to suggest 2 more improvements to this enhancement.

1. When you navigate through inputs using the [tab] key and the dropdown is on focus, users should be able to type in and select the values. Right now when the dropdown is in focus but not opened, it doesn't respond to keyboard input other than arrow keys.

2. When typing, the selected value should scroll into view. For example, I have a dropdown with US states. when I type "WA", it doesn't scroll down to the bottom of the list.

[amorey]

Yes, that would be helpful. Is this something you'd be interested in taking a look at? The CSS/JS code is here:
https://github.com/muicss/mui/blob/master/src/js/select.js#L148-L171

[nxp2910]

Yes, I'd like to take a look at this. Only thing is, it would take me a few more days before I get to it as I'm swamped with work.

…

On Tue, Mar 21, 2017 at 6:22 AM, Andres Morey ***@***.***> wrote: Yes, that would be helpful. Is this something you'd be interested in taking a look at? The CSS/JS code is here: https://github.com/muicss/mui/blob/master/src/js/select.js#L148-L171 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#203 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AISWGs6h-S8_eF-u6ky2p-Wa2wi7Rjetks5rn6TygaJpZM4MgmxW> .

-- *Nethkelum Perera* Programmer Analyst www.GoECart.com (585) 545 0898 http://www.linkedin.com/in/nethkelum

[nxp2910]

@amorey I think updating the onWrapperKeyDown function as below fixes the problem.

function onWrapperKeyDown(ev) {
  if (ev.defaultPrevented) return;

  var keyCode = ev.keyCode,
      menu = this._menu;

  if (!menu) {
      // open custom menu
      renderMenu(this);
  } else {
    // tab
    if (keyCode === 9) return menu.destroy();
  
    // escape | up | down | enter
    if (keyCode === 27 || keyCode === 40 || keyCode === 38 || keyCode === 13) {
      ev.preventDefault();
    }

    if (keyCode === 27) {
      // escape
      menu.destroy();
    } else if (keyCode === 40) {
      // up
      menu.increment();
    } else if (keyCode === 38) {
      // down
      menu.decrement();
    } else if (keyCode === 13) {
      // enter
      menu.selectCurrent();
      menu.destroy();
    }
  }
}

[amorey]

@nxp2910 Removing the if clause at L111 will cause the menu to open on any keydown event.

If we want to mimic the default browser behavior I think we need to modify the behavior of the onWrapperKeyPress method:
https://github.com/muicss/mui/blob/master/src/js/select.js#L148-L171

[scheccia1]

this function don't work well. If I have a long list when i type key the scrollbox don't move it.

[amorey]

@scheccia1 The latest versions of MUI should move the menu cursor when you press a key:
https://jsfiddle.net/muicss/vzgw0z2u/

Alternatively, you can use the default menu by adding a mui-select--use-default class to the wrapper:

<div class="mui-select mui-select--use-default">
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
  <label>Select Example</label>
</div>

[scheccia1]

the cursor move it. If I click enter button, after click a letter, the selection is correct, but don't scroll the list.

[scheccia1]

try this, in the link that you send me:

<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-select">
    <select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>e</option>
      <option>f</option>
      <option>g</option>
      <option>h</option>
      <option>i</option>
      <option>l</option>
      <option>m</option>
      <option>n</option>
      <option>o</option>
      <option>p</option>
      <option>q</option>
      <option>r</option>
    </select>
    <label>Select Example</label>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

[amorey]

I see. Ok, I'll take a look at how to fix the scrolling behavior. In the mean time, as I mentioned previously, if you'd like to use the browser's default menu you can use the mui-select--use-default class.