Repository: storybookjs/storybook
File: code/core/src/manager/settings/shortcuts.tsx (TypeScript)

Code before:
    return this.setState({
      shortcutKeys: {
        ...shortcutKeys,
        ...toShortcutState({ [activeFeature]: defaultShortcut } as Record<Feature, any>),
      },
    });
  };

  displaySuccessMessage = (activeElement: Feature) => {
    const { successField, shortcutKeys } = this.state;
    return activeElement === successField && shortcutKeys[activeElement].error === false
      ? 'valid'
      : undefined;
  };

  displayError = (activeElement: Feature): ValidationStates | undefined => {
    const { activeFeature, shortcutKeys } = this.state;
    return activeElement === activeFeature && shortcutKeys[activeElement].error === true
      ? 'error'
      : undefined;
  };

  renderKeyInput = () => {
    const { shortcutKeys, addonsShortcutLabels } = this.state;
    const availableShortcuts = (Object.entries(shortcutKeys) as [Feature, any][]).filter(
      ([feature]: [Feature, any]) =>
        shortcutLabels[feature] !== undefined ||
        (addonsShortcutLabels && addonsShortcutLabels[feature])
    );

    const arr = availableShortcuts.map(([feature, { shortcut }]: [Feature, any]) => (
      <Row key={feature}>
        {/* @ts-expect-error (non strict) */}
        <Description>{shortcutLabels[feature] || addonsShortcutLabels[feature]}</Description>

        <TextInput
          spellCheck="false"
          valid={this.displayError(feature)}
          className="modalInput"
          onBlur={this.onBlur}
          onFocus={this.onFocus(feature)}
          // @ts-expect-error (Converted from ts-ignore)
          onKeyDown={this.onKeyDown}
          value={shortcut ? shortcutToHumanString(shortcut) : ''}
          placeholder="Type keys"
          readOnly
        />

        {/* @ts-expect-error (non strict) */}
        <SuccessIcon valid={this.displaySuccessMessage(feature)} />
      </Row>

Review comment (suggestion):
```suggestion
    // Filter out keyboard shortcuts from localStorage that no longer exist in code
    const availableShortcuts = (Object.entries(shortcutKeys) as [Feature, any][]).filter(
```

Code after:
    return this.setState({
      shortcutKeys: {
        ...shortcutKeys,
        ...toShortcutState({ [activeFeature]: defaultShortcut } as Record<Feature, any>),
      },
    });
  };

  displaySuccessMessage = (activeElement: Feature) => {
    const { successField, shortcutKeys } = this.state;
    return activeElement === successField && shortcutKeys[activeElement].error === false
      ? 'valid'
      : undefined;
  };

  displayError = (activeElement: Feature): ValidationStates | undefined => {
    const { activeFeature, shortcutKeys } = this.state;
    return activeElement === activeFeature && shortcutKeys[activeElement].error === true
      ? 'error'
      : undefined;
  };

  renderKeyInput = () => {
    const { shortcutKeys, addonsShortcutLabels } = this.state;
    // Filter out keyboard shortcuts from localStorage that no longer exist in code
    const availableShortcuts = (Object.entries(shortcutKeys) as [Feature, any][]).filter(
      ([feature]: [Feature, any]) =>
        shortcutLabels[feature] !== undefined ||
        (addonsShortcutLabels && addonsShortcutLabels[feature])
    );

    const arr = availableShortcuts.map(([feature, { shortcut }]: [Feature, any]) => (
      <Row key={feature}>
        {/* @ts-expect-error (non strict) */}
        <Description>{shortcutLabels[feature] || addonsShortcutLabels[feature]}</Description>

        <TextInput
          spellCheck="false"
          valid={this.displayError(feature)}
          className="modalInput"
          onBlur={this.onBlur}
          onFocus={this.onFocus(feature)}
          // @ts-expect-error (Converted from ts-ignore)
          onKeyDown={this.onKeyDown}
          value={shortcut ? shortcutToHumanString(shortcut) : ''}
          placeholder="Type keys"
          readOnly
        />

        {/* @ts-expect-error (non strict) */}
        <SuccessIcon valid={this.displaySuccessMessage(feature)} />