Story arg doesn't represent all state updates in the Controls UI

[StephenSHorton]

Summary

My value prop doesn't appear to show all of the updates occurring with itself in the Controls UI. It does for the first interaction but then doesn't continue.
https://github.com/user-attachments/assets/7e4cdb52-d912-4ada-883b-2851963424ab

Additional information

Story:

import { action } from '@storybook/addon-actions'
import { useArgs } from '@storybook/preview-api'
import type { Meta, StoryObj } from '@storybook/react'

import Select from './select'

const options = ['Option 1', 'Option 2', 'Option 3']

/*
  TODO - Handle no options (hide content)
*/

const meta = {
  title: 'Components/Select',
  component: Select,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    value: {
      control: 'object',
      options,
      description: 'The currently selected value',
      table: {
        readonly: true,
        type: {
          summary: 'string | Array<string>',
          detail: `
// multi = false | undefined
string
// multi = true
Array<string>
          `,
        },
      },
    },
    onValueChange: {
      description: 'Callback for when the value changes',
      table: {
        type: {
          summary: '(value: string) => void | (value: Array<string>) => void',
          detail: `
// multi = false | undefined
(value: string) => void
// multi = true
(value: Array<string>) => void
          `,
        },
      },
    },
    options: {
      control: 'object',
      options,
      description: 'The options to display in the select',
      table: {
        type: {
          summary: 'Array<string>',
        },
      },
    },
    multi: {
      control: 'boolean',
      description: 'Whether the select is a multi-select',
    },
  },
  args: {
    value: undefined,
    onValueChange: action('onValueChange'),
    options,
    multi: false,
  },
  render: (args) => {
    const [{ value }, updateArgs] = useArgs()

    if (args.multi) {
      const onValueChangeMulti = (newValue: string[]) => {
        args.onValueChange?.(newValue)
        updateArgs({ value: newValue })
      }
      return (
        <Select {...args} value={value} onValueChange={onValueChangeMulti} />
      )
    } else {
      const onValueChange = (newValue: string) => {
        args.onValueChange?.(newValue)
        updateArgs({ value: newValue })
      }
      return <Select {...args} value={value} onValueChange={onValueChange} />
    }
  },
} satisfies Meta<typeof Select>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {}

Component code

import * as RadixSelect from '@radix-ui/react-select'
import { ComponentProps, forwardRef, HTMLAttributes, useId } from 'react'

import { cn } from '@/lib/utils'

/** Props not meant to be used outside of the select component */
interface InternalProps {
  innerRef?: React.Ref<HTMLButtonElement>
}

/** Props shared between {@link SingleSelectProps} and {@link MultiSelectProps} */
interface GeneralProps extends HTMLAttributes<HTMLButtonElement> {
  options: Array<string>
}

/** {@link SingleSelect} only props */
interface SingleSelectProps extends GeneralProps {
  value?: string
  onValueChange?: (value: string) => void
  multi?: false
}

/** {@link MultiSelect} only props */
interface MultiSelectProps extends GeneralProps {
  value?: Array<string>
  onValueChange?: (value: Array<string>) => void
  multi: true
}

type SelectProps = SingleSelectProps | MultiSelectProps

const triggerStyles = 'h-10 w-[256px] rounded-md border px-2 py-1'
const selectItemStyles = 'p-1 hover:bg-surface-tertiary cursor-pointer'

const contentProps: ComponentProps<typeof RadixSelect.Content> = {
  position: 'popper',
  collisionPadding: 10,
  side: 'bottom',
  align: 'start',
  className:
    'w-[var(--radix-select-trigger-width)] border rounded-md p-1 bg-surface-primary',
}

const Select = forwardRef(
  (props: SelectProps, ref: React.Ref<HTMLButtonElement>) => {
    if (isMultiSelectProps(props)) {
      return <MultiSelect innerRef={ref} {...props} />
    }

    return <SingleSelect innerRef={ref} {...props} />
  },
)

function SingleSelect({
  innerRef,
  className,
  value,
  onValueChange,
  options,
  multi: _,
  ...props
}: SingleSelectProps & InternalProps) {
  return (
    <RadixSelect.Root value={value} onValueChange={onValueChange}>
      <RadixSelect.Trigger
        ref={innerRef}
        className={cn(triggerStyles, className)}
        {...props}
      >
        {value}
      </RadixSelect.Trigger>
      <RadixSelect.Portal>
        <RadixSelect.Content {...contentProps}>
          <RadixSelect.ScrollUpButton />
          {options.map((option) => {
            const key = useId()
            return (
              <RadixSelect.SelectItem
                key={key}
                className={selectItemStyles}
                value={option}
              >
                {option}
              </RadixSelect.SelectItem>
            )
          })}
          <RadixSelect.ScrollDownButton />
        </RadixSelect.Content>
      </RadixSelect.Portal>
    </RadixSelect.Root>
  )
}

function MultiSelect({
  innerRef,
  className,
  value,
  onValueChange,
  options,
  multi: _,
  ...props
}: MultiSelectProps & InternalProps) {
  const handleSelect = (selectedOption: NonNullable<typeof value>[number]) => {
    if (!value) return onValueChange?.([selectedOption])

    if (value.includes(selectedOption)) {
      // Remove if already selected
      onValueChange?.(value.filter((v) => v !== selectedOption))
    } else {
      // Add new option
      onValueChange?.([...value, selectedOption])
    }
  }

  return (
    <RadixSelect.Root onValueChange={handleSelect}>
      <RadixSelect.Trigger
        ref={innerRef}
        className={cn(triggerStyles, className)}
        {...props}
      >
        {value?.length ? `${value.length} Selected` : 'Select...'}
      </RadixSelect.Trigger>
      <RadixSelect.Portal>
        <RadixSelect.Content {...contentProps}>
          <RadixSelect.ScrollUpButton />
          {options.map((option) => {
            const key = useId()
            // TODO - Select state will be different than the single select (value doesn't go into the root)
            return (
              <RadixSelect.SelectItem
                key={key}
                className={selectItemStyles}
                value={option}
              >
                {option}
              </RadixSelect.SelectItem>
            )
          })}
          <RadixSelect.ScrollDownButton />
        </RadixSelect.Content>
      </RadixSelect.Portal>
    </RadixSelect.Root>
  )
}

function isMultiSelectProps(
  props: SingleSelectProps | MultiSelectProps,
): props is MultiSelectProps {
  return 'multi' in props && props.multi === true
}

export default Select

Create a reproduction

No response