[Bug]: if a control option includes 'reverse' , function reverse() { [native code] } is displayed

[jericirenej]

Describe the bug

If a story control type contains the word 'reverse' among its options, the control value in the UI for this option will display the text function reverse() { [native code] } instead of "reverse".

I've provided the StackBlitz reproduction link below, however it is from an anonymous fork, so it might get wiped after a while. In that case, the story setup is quite straightforward:

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import SomeComponentComponent from './SomeComponent.svelte';

  const { Story } = defineMeta({
    title: 'Example/SomeComponent',
    component: SomeComponentComponent,
    tags: ['autodocs'],
    argTypes: {
      option: {
        control: "inline-radio",
        options: ['normal', 'reverse',],
      },
    },
    
  });
</script>

<Story name="SomeComponent" args={{ option:'normal' }} />

Reproduction link

https://stackblitz.com/edit/github-yndwrtai?file=src%2Fstories%2FSomeComponent.stories.svelte

Reproduction steps

1. Create a component that accepts a string output
2. In the component's story, specify the argType as {control: "inline-radio", options: ["normal", "reverse"]}
3. Run Storybook and navigate to the component story. For the specified control, you will see the following options displayed:

• normal 
• function reverse() { [native code] }

System

torybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/addon-interactions: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/addon-svelte-csf: ^5.0.0-next.21 => 5.0.0-next.21 
    @storybook/blocks: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/svelte: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/svelte-vite: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/test: ^8.5.0-beta.6 => 8.5.0-beta.6 
    storybook: ^8.5.0-beta.6 => 8.5.0-beta.6

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be a string serialization issue in the controls handling. The word 'reverse' is being interpreted as a reference to the Array.prototype.reverse() function. The fix would likely be in the controls value serialization logic to ensure string values are properly handled as literals rather than potential function references. Without access to the specific control rendering code, I cannot provide the exact location, but this would likely be in the controls addon implementation for radio inputs.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile