mi6
Multiple Components: selecting item with Space scrolls screen
Summary of the bug
Pressing space to select an option in a code example scrolls the screen
🪜 How to reproduce
Go to a component where you can select an option with space (tree-view)
Select an option then arrow up or down to another, press space to select the option
See that the window is scrolled instead of selecting the option
🧐 Expected behaviour
Should select the option
Additional info
Consider capturing keyboard input when a code window is focused.
think this might be a bug in the tree view component. pressing space on an option is causing the window to scroll. happens in storybook too
am not sure if space should actually select the item though - that should be checked whether that is intended behaviour
This behaviour also occurs on Code Example language tabs, Page Header tabs, Code Example code preview windows
Design Site Code Preview will be raised as a separate ticket
Also noticed this issue with the tree view while working on mi6/ic-design-system#1471. (And I have updated the tree view on the website to select tree items when pressing Space as part of that ticket. In Storybook, pressing Space causes tree items to be selected / show the selected state so felt it made sense to make the tree view on our website match)
I'm pretty certain this is something that needs to be fixed in individual components as pressing Space in some component previews causes scrolling, and it doesn't in others. Even if capturing the event in the component previews did work, this issue would still happen for customers if they are using certain components so we need to stop the Space event propagation from within the components themselves.
Also I think this work may as well involve stopping the propagation of all keyboard events (not just Space) when components are focused? Because if the Space event gets propagated, so will other keyboard events, and I can see this causing problems. (Just as an example, if you press the "m" key in Storybook while focused on e.g. side navigation, the event bubbles up and enables the Storybook measuring functionality). (Although popover menu may be an exception because of the keyboard shortcut labels)
This ticket is to be treated as a spike - raise a new ticket for each component you find spacebar issues in, and if you've got some time leftover fix a couple of the tickets. (trying to avoid a dev being stuck on this ticket for ages if it turns out lots of components have this spacebar issue)