Do you want to work on this issue?

You can request for a bounty in order to promote it!

Problem with storybook-controls of type "select" #12641

kporaj posted onGitHub

### Bug or support request summary

Let's assume React component MyComponent.tsx (code below) and it's story file MyComponent.stories.tsx (code below). There also is customObject.ts (code below) consisting of 29 key-value pairs (this number is important).

In MyComponent.tsx there is optional property called "myProperty" which is of type "keyof typeof customObject".

What I expected was that controls in the documentation for that property would be of type select.

What happens instead is that control is of type object (?), see screenshot below Ps. don't be mislead by "show 18 more", there is actually 29 possible values.

I mentioned that length of this object (29) is important. For some reason, when i comment one of the options (so for objects of length <= 28), this works as expected. (control is of type select).

Another little 'bug' is that once you select on of the options, you can't go back to myProperty being undefined.

I've also checked this for scenario where myProperty is mandatory property, and It was all right. Even for much larger objects control was always of type "select".

Steps to reproduce

Just add MyComponent.tsx, MyComponent.stories.tsx and customObject.ts to your project and you can see it for yourself. Code below

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react v6.0.21
@storybook/addon-controls v6.0.22

Code Snippets (Optional)

MyComponent.tsx

import React from "react";
import { customObject } from "../utilities/customObject";

export interface MyComponentProps {
  myProperty?: keyof typeof customObject;
}

export const MyComponent: React.FC<MyComponentProps> = ({ myProperty }) => {
  return <div>{myProperty ? customObject[myProperty] : "I'm undefined"}</div>;
};

MyComponent.stories.tsx

import { Meta, Story } from "@storybook/react/types-6-0";
import React from "react";
import { MyComponent, MyComponentProps } from "../components/MyComponent";

export default {
  title: "MyComponent",
  component: MyComponent,
} as Meta;

export const MyComponentExample = (args: Story<MyComponentProps>) => {
  return (
    <div>
      <MyComponent myProperty="k1" {...args} />
    </div>
  );
};

customObject.ts

export const customObject = {
  k1: "I'm option 1",
  k2: "I'm option 2",
  k3: "I'm option 3",
  k4: "I'm option 4",
  k5: "I'm option 5",
  k6: "I'm option 6",
  k7: "I'm option 7",
  k8: "I'm option 8",
  k9: "I'm option 9",
  k10: "I'm option 10",
  k11: "I'm option 11",
  k12: "I'm option 12",
  k13: "I'm option 13",
  k14: "I'm option 14",
  k15: "I'm option 15",
  k16: "I'm option 16",
  k17: "I'm option 17",
  k18: "I'm option 18",
  k19: "I'm option 19",
  k20: "I'm option 20",
  k21: "I'm option 21",
  k22: "I'm option 22",
  k23: "I'm option 23",
  k24: "I'm option 24",
  k25: "I'm option 25",
  k26: "I'm option 26",
  k27: "I'm option 27",
  k28: "I'm option 28",
  k29: "I'm option 29",
};

I'm having the same issue, I have a union with hundreds of strings, and it's the type of a prop in one component. If I type it as optional the control is a normal input, but if it's required it's a select as expected

posted by giubatt about 4 years ago

FWIW I'm experiencing exactly what @giubatt mentioned after upgrading typescript to 4.2.2, downgrading it back to 4.1.5 seems to "fix" this

posted by Elfo404 about 4 years ago

It works with my union types but not with the ones made with keyof typeof:

// This works
export type TextTypesProps = 'h1' | 'h2' | 'h3';

// This doesn't work
const colors = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF',
}
export type TextTColorsProps = keyof typeof colors;

---- Edit:

Both the examples above actually works. The problem is when I try to use the Theme interface from Emotion.

posted by timarcosdias almost 3 years ago

Issue still persists i want the size to be select option but its not working its showing

code

export default {
  title: 'core/atoms/Badge',
  component: StoryBookBadge,
  argTypes: {
    size: {
      control: { type: 'select', options: ['xl', 'lg', 'md', 'sm', 'xs'] },
      defaultValue: 'md',
    },
    leftSection: {
      control: { type: 'boolean' },
      mapping: { false: '', true: <IconPlus /> },
    },
    rightSection: {
      control: { type: 'boolean' },
      mapping: { false: '', true: <IconPlus /> },
    },
    color: {
      table: {
        disable: true,
      },
    },
    vars: {
      table: {
        disable: true,
      },
    },
  },
} as Meta;

posted by Snivio over 1 year ago

@nabby27 created a $50.00 reward using Opire <details><summary>How to earn this reward?</summary>

Since this project does not have Opire bot installed yet 😞 you need to go to Opire and claim the rewards through your programmer's dashboard once you have your PR ready 💪</details>

posted by opiredev 11 months ago

Hey @kylemh , what's the progress of this issue ? Can I take this ?

posted by hunxjunedo 8 months ago

is it still open ?

posted by krishanjangid 5 months ago

Is the issue open ?

posted by jeevan642 4 months ago

@Snivio

apologies for any mistakes here, as I've never commented on anything before, but In Storybook, defaultValue is used in args, not directly in argTypes. When you set a default value in argTypes, it won't automatically reflect in the component's behavior. Instead, you should move the default value to the args section of your Storybook configuration.

import { Meta } from '@storybook/react';
import { StoryBookBadge } from './StoryBookBadge';
import { IconPlus } from './IconPlus'; // Replace with actual import path

export default {
  title: 'core/atoms/Badge',
  component: StoryBookBadge,
  args: {
    size: 'md', // Set the default value here
  },
  argTypes: {
    size: {
      control: { type: 'select', options: ['xl', 'lg', 'md', 'sm', 'xs'] },
    },
    leftSection: {
      control: { type: 'boolean' },
      mapping: { false: '', true: <IconPlus /> },
    },
    rightSection: {
      control: { type: 'boolean' },
      mapping: { false: '', true: <IconPlus /> },
    },
    color: {
      table: {
        disable: true,
      },
    },
    vars: {
      table: {
        disable: true,
      },
    },
  },
} as Meta;

posted by Uncle-Becky 4 months ago

Fund this Issue

$50.00

Funded