storybook: enableShortcuts not working in v5

Adding a comment to beat back the inactivity bot. I find the keyboard shortcuts pretty disruptive, so having a working config option to disable them would be great.

@hawkticehurst no need to thank whatsoever. I should be the one thanking you for the follow-up response and willingness to provide us with a reproduction. Let us know once it’s up and we’ll look into it.

Stay safe

+1 from me as well. Also, how’s it going @shilman 😄 – saying hi from a distant past from Zippy.

I am also very thankful for the pro-active help and your time investment!

Even more so, because I realized, it was my own mistake. Miswrote 'keydown' as 'keyDown'. Fixed it now, and I can confirm that this is not a storybook bug. NOTE: I am using react.

Again, thanks and sorry!

I’m using 6.2.9 and it doesn’t appear to be working for me. The shortcuts are disabled in storybook, but it’s still breaking keyboard events on React components.

The following works outside of Storybook, but not inside a story even with shortcuts disabled.

    const onKeydown = useCallback(
        (event: KeyboardEvent) => {
            console.warn({event});
        },
        []
    );

    useEffect(() => {
        console.warn('useEffect');
        document.addEventListener('keydown', onKeydown);
        return () => document.removeEventListener('keydown', onKeydown);
    }, [onKeydown]);

“useEffect” is logged to the console, but onKeydown is never called. Works fine outside Storybook.

Turning off shortcuts should allow events on the document? or am I misunderstanding what this feature flag does?

@hawkticehurst sorry for the late response. But I was able to look into the issue. Going to detail what I did.

• Cloned your repository.
• Installed the dependencies.
• Commented out the option parameter in .storybook/preview.js.
• Ran npm start and was able to confirm the issue.
• Stopped Storybook and commented the addons.setConfig() inside .storybook/manager.js and enabled it in .storybook/preview.js and it worked as you’ve mentioned.
• As Storybook 6.3 was just released, I took the opportunity to test it, so I created a branch and ran npx sb upgrade to bump Storybook to the latest version.
• Defaulted to the intended, which is to include the code inside .storybook/manager.js enabled and made one small adjustment to test it out. Turning it into:

// .storybook/manager.js

import { addons } from "@storybook/addons";

addons.setConfig({
  enableShortcuts: true,
  isFullscreen: true, // For testing purposes to see if it will show the UI in full screen.
  showNav: true,
  showPanel: true,
  panelPosition: "bottom",
  sidebarAnimations: true,
  isToolshown: true,
  selectedPanel: undefined,
  initialActive: "sidebar",
  showRoots: true,
});

• Ran npm start and it yielded the following:

https://user-images.githubusercontent.com/22988955/123470815-d22b8e00-d5ec-11eb-8ccd-e668f917657b.mp4

As you can see it works as intended. If you could bump your Storybook version and try it on your end to see if the issue is fixed.

One last thing, which I don’t think is related to Storybook itself but probably to the framework you’re using. If you press for one of the keys bound to Storybook’s shortcuts, for instance “a” you’ll see that the Addons panel will be enabled/disabled. Probably it’s related to how the framework works with the events and how it’s bubbling up.

Let us know if managed to make it work on your end.

Stay safe

@codemile Same here. This is definitely STILL an issue.

I have enableShortcuts disabled. Default SB shortcuts indeed do not work. But my keydown event handlers are ignored.

This issue should be re-opened.

I updated to latest storybook 6.1.17 and got a warning about this https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-immutable-options-parameters

so now I tried again

// in .storybook/manager.js
import addons from '@storybook/addons';

addons.setConfig({
  enableShortcuts: false,
});

and that worked. no warnings or issues. hopefully, that was it

// preview.js
addParameters({
  docs: {
    inlineStories: false
  },
  options: {
    enableShortcuts: false,
    docsMode: true
  }
});

// manager.js
addons.setConfig({
  theme: create({
      base: 'light',
      brandImage: './img/pra-react-components-lettermark200x38.png',
      brandTitle: 'PRA React Components',
      brandUrl: 'TBD'
    }),
})

I hope that helps?

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-rc.6 containing PR #7990 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

isFullscreen working for me. What are you seeing?

enableShortcuts isn’t working – seems like a bug.