keyboard event does not work with list of async links in useComboBox #4015
-
Apologies for trolling the discussion board this evening. Desperately pulling a weekend grind to have something done before work next week, this thing has kept me blocked all week. So i have a typical asynchronous useComboBox. The returned asynchronous result is already the 'filtered' list of rich search items. So if i type in "foo", the list of results is based on the api's interpretation of "foo". I have wrapped each search item in an anchor tag. from here it should be as simple as clicking or or keyboard navigating to an item, and either pressing space/enter or left clicking to navigate to that respective page. left clicking seems to work, however the keyboard event doesn't seem to reach the rendered item. am i even going about this the right way? any help is greatly appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
With a combo box, keyboard focus stays on the input element you're typing into so that's why keyboard events don't reach the actual items. You might have to do a manual navigation in JS (eg via window.location) in the onSelectionChange event. |
Beta Was this translation helpful? Give feedback.
-
ahh yeah ok that makes sense, cheers for the reply @devongovett. Unfortunately it serves to reinforce a growing opinion i have of the useComboBox that in the context of creating a search menu with a similiar user experience of say, the amazon search, its near impossible or exposes a few flaws in the current implementation. Although id be more than happy to concede its my lack of understanding of the react-aria infrastructure. ive submitted an issue that addresses some concerns and what id consider bugs or unintuitive api's in issue #4016. |
Beta Was this translation helpful? Give feedback.
With a combo box, keyboard focus stays on the input element you're typing into so that's why keyboard events don't reach the actual items. You might have to do a manual navigation in JS (eg via window.location) in the onSelectionChange event.