Typing storybook shortcuts in inputs triggers them

[stropitek]

For example, try typing s in an input: it opens / closes the storybook sidebar

Might be related to shadow dom? Because I don't remember having the same issues in other projects using storybook

[stropitek]

I made some research and I think I understand why storybook triggers shortcut actions when typing in inputs.

I read this interesting article which reveals that:

Most of the standard UI events bubble and are composed with a few exceptions. There are a few exceptions like mouseenter and mouseleave that aren't bubbling and composed.

The key here is that composed events leak to the shadow dom when they bubble up the dom tree.

If add an event listener on the storybook root like this:

storybookRoot.addEventListener('keydown', (event) => { console.log(event.composedPath(), event.target)})

it gives this:

Therefore I suspect storybook to use the target property to know where the event originated from. If the event comes from within the shadow tree, the target element is the shadow host and storybook might think it originated from a div, not some input.

Will try to confirm that by searching in storybook's source code. Seems that could be fixable by using the result from composedPath()

[targos]

Is it possible to block event bubbling so it doesn't exit the shadow dom (not sure we want that though) ?

[stropitek]

Is it possible to block event bubbling so it doesn't exit the shadow dom (not sure we want that though) ?

Could work but only if the listener of the event which we want to prevent is not directly on the shadow host. But I don't know if it's possible to change the bubbling behaviour of a standard event.

[targos]

I wonder if the problem also affects storybook users who create custom elements (web components).

[stropitek]

storybookjs/storybook#23790

[stropitek]

storybookjs/storybook#24179

[stropitek]

Fixed in storybook but also since we moved away from shadow dom.