Keyboard events are not triggered in my components wrapped into stories

[Nikolsi]

I have a component that has attached keyboard events, e.g. KeyDown/KeyUp events.
However, I cannot check the result in Storybook for my component. I have tried to open it in another tab as IFrame - does not work too.

export const KeyboardCheckStory = () => {
    const myKeyDown = React.useCallback<React.KeyboardEventHandler>(event => {
        alert('code: ' + event.keyCode)
    }, [])
    return <div onKeyDown={myKeyDown} />
}

Version: 5.3.19

{
    ....
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-storysource": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/cli": "^5.3.19",
    "@storybook/react": "^5.3.19",
    ....
}

Do I need some extra configuration?

Thanks in advance!

[ndelangen]

I think you need to ensure you div has focus, for keyboard input events to be triggered on an element?

[Nikolsi]

Hi Norbert,
I think I have found more or less working solutions for my problem. Thanks for the response and advice.
Yes, the first problem was in focus. However, even with focus, my keyboard events bubble together with Storybook shortcuts (e.g. letter A).

Solution №1:
Assign window.keyXXX events to null because storybook assigns keyevents directly to window.

Solution №2:
Use setConfig based on the following guide (https://storybook.js.org/docs/configurations/options-parameter/)
However, could not manage to dynamically on/off it for different stories.