Prevent 'ArrowLeft' and 'ArrowRight' from changing selection in useSelect

[bdow]

Hi all,

The behavior in the useSelect allows for the right and left arrows to change the current selection (https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/select/src/useSelect.ts#L80).
Is it possible to make this an opt-in (or opt-out) feature? Having the arrow keys behave in this manner breaks from native select field behaviors, so it would be nice to disable.

Thanks,
Brandon

[devongovett]

For <select>, it actually depends on the OS/browser. On Windows (and on macOS at least in Firefox), left and right arrows do change the selection. See #1265 where this feature was proposed.

One way to get rid of it would be to wrap the keyboard handler in your own. Something like this:

let {triggerProps} = useSelect(...);
let onKeyDown = e => {
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') return;
  triggerProps.onKeyDown(e);
};

<button {...triggerProps} onKeyDown={onKeyDown}>

[bdow]

Thanks @devongovett - I had no clue this was natively supported anywhere (clearly). I guess I need to start using more than just Chrome all the time 😄. Thank you for the thorough response and example.