We're using a combination of a text input and table component to mimic some autocomplete functionality. User types in the text input, we perform a search, data is dynamically displayed in the table. This is all working great.
Once a set of results appears in the table, we want users to be able to tab into the table, use the arrow keys to navigate the table, then select a row. Row selection will cause the table to be hidden and we'll show other UI components based on the selected row.
We've got this working with the mouse - if a user clicks a row, the table will hide. Perfect.
Unfortunately, we can't seem to find a way to do this via the keyboard. The arrows work for navigation but it doesn't appear that there's any key we can use to simulate clicking the row with a mouse (this works fine with the mouse, BTW).
In the app we're building, navigation via keyboard is more important than using a mouse.
So, we're hoping that there's a way to do this. Any ideas?
Thanks.
have you tried setting "Multiple" for the Selection Mode option under Row Selection of the Right Hand Pane when inspecting the table component? I'm able to select multiple rows using my keyboard and hitting the space bar over which rows I'd like selected. See my screen recording attached: