Keyboard shortcuts getting reset and "Reset Viewport" hotkey doesn't work

[EloB]

Describe the bug
There are 2 bugs with Keyboard shortcuts.

1. Every time you reload the browser it can't reload last shortcuts from localStorage. They are getting reset.
2. The default "Reset viewport" hotkey doesn't work on Mac.

To Reproduce
This is a super simple example. Just creating a CRA app and installing Storybook. Have the same issue in my big app as well and that is a Next.js app.

npx create-react-app my-app
cd my-app
npx sb init
npm run storybook

# Open any story canvas
open "http://localhost:6006/?path=/story/example-button--primary"

# Press "V" to change into any "Viewport".
# Press "Alt + V" to try to reset "Viewport".

System

Environment Info:

  System:
    OS: macOS 11.6.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Safari: 15.3
  npmPackages:
    @storybook/addon-actions: ^6.4.19 => 6.4.19
    @storybook/addon-essentials: ^6.4.19 => 6.4.19
    @storybook/addon-interactions: ^6.4.19 => 6.4.19
    @storybook/addon-links: ^6.4.19 => 6.4.19
    @storybook/builder-webpack5: ^6.4.19 => 6.4.19
    @storybook/manager-webpack5: ^6.4.19 => 6.4.19
    @storybook/node-logger: ^6.4.19 => 6.4.19
    @storybook/preset-create-react-app: ^4.0.1 => 4.0.1
    @storybook/react: ^6.4.19 => 6.4.19
    @storybook/testing-library: ^0.0.9 => 0.0.9

[EloB]

I've tried Safari and Chrome. None worked. Also went into Application tab in Chrome devtool and reset everything. Still doesn't work.

[EloB]

Haven't confirmed this but a guy from Discord said it worked on Windows so it might be OS related. I'm running OS X could also be keyboard layout related I have Swedish keyboard layout.

[EloB]

Event.key turns into some weird symbol while pressing Option (altKey) and V

Option (⌥) + "V" (OS X)

Other Event.key has another behaviour when normal press, shift, ctrl and meta

"V"

Shift + "V"

Ctrl + "V"

Meta (⌘) + "V" (OS X)

[EloB]

Here is the problem. The keys array will be ["alt", "‹"]. So trying to pressing ⌥ + V won't hit default hotkey.

storybook/lib/api/src/lib/shortcut.ts

Line 40 in a8db958

keys.push(e.key.toUpperCase());

storybook/addons/viewport/src/shortcuts.ts

Line 50 in a8db958

defaultShortcut: ['alt', 'V'],

[EloB]

Maybe use .code instead and use something like that /^(?:Key|Digit)(.+)$/ to grab the character? Then maybe have a else statement on the other keys.

Keyboard layout is not stable.
https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API

If that above was stable then we could do a really nice solution... So the hotkey shortcuts are localized.

[OktarinTentakel]

+1

just stumbled upon this on mac in 6.3.13

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.30 containing PR #20167 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

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