storybook argType and defaultValue with a select losing values when changing view in the sidebar

Viewed 1638

I am trying to use argTypes with a select to allow the user to change fields, I have this default export:

const themes = {
  defaultTheme,
  salesTheme,
  cuttingTheme,
} as const;

export default {
  title: 'atoms/Button',
  component: Button,
  argTypes: {
    theme: {
      options: Object.keys(themes), // iterator
      mapping: Object.values(themes), // values
      control: {
        type: 'select',
        labels: Object.keys(themes),
        values: Object.values(themes), //
      },
      defaultValue: themes.defaultTheme,
    },
  },
} as ComponentMeta<typeof Button>;

defaultValue works fine when the page first loads but if I change a menu item on the sidebar pane it loses its value.

0 Answers
Related