[Bug]: keyboard shortcuts cause focus los on custom elements

[rhelling]

Describe the bug

When I have a story which contains a custom element, I want to be able to type certain characters into the element such as "1".

Probable cause of the issue

Storybook has a check when you type inside an input element to verify if the keyboard event is emitted from an input, textarea or contenteditable element. This check, however, does not work from within custom elements because of event retargeting.

To Reproduce

https://stackblitz.com/edit/github-gdt3q9?file=src%2Fstories%2FInput.stories.ts

type 1 inside the given input

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.17.0 - ~/.volta/tools/image/node/18.17.0/bin/node
    npm: 9.6.7 - ~/.volta/tools/image/node/18.17.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-a11y: ^7.0.4 => 7.1.1
    @storybook/addon-essentials: ^7.0.4 => 7.1.1
    @storybook/addon-links: ^7.0.4 => 7.1.1
    @storybook/addon-mdx-gfm: ^7.0.4 => 7.1.1
    @storybook/addon-storysource: ^7.0.4 => 7.1.1
    @storybook/addons: ^7.0.4 => 7.1.1
    @storybook/blocks: ^7.0.4 => 7.1.1
    @storybook/theming: ^7.0.4 => 7.1.1
    @storybook/web-components: ^7.0.4 => 7.1.1
    @storybook/web-components-vite: ^7.0.4 => 7.1.1

Additional context

Suggested solution

• Extend the check to the first element in the target.composedPath()
• Extend the check to elements that have an aria role like input, searchbox, textbox or combobox

[quintondang]

I have been running into this too! 🙏

[rhelling]

@quintondang as a workaround you can set the enableShortcuts to false in the manager.ts. This disables the keyboard shortcuts for all stories.

import {addons} from '@storybook/manager-api';

addons.setConfig({
  enableShortcuts: false
});

[quintondang]

@rhelling do you know if you can disable it for a single story?

[shilman]

Extend the check to the first element in the target.composedPath()
Extend the check to elements that have an aria role like input, searchbox, textbox or combobox

If somebody wants to create a PR with one of the suggested solutions, that would be a great contribution

[rasvii]

@shilman I am interested to try out the solutions.

[noelparisi]

👀