Accordion.Root where type changes from single to multiple depending on external state

[felquis]

Hi, I'm working on a use case, where the the Accordion.Root type change from single to multiple if if there's a search text on an external input.

Use cases:

• When user is searching for a specific value, display all Accordion.Items open by default
  • if the user close one accordion, the other should remain open & work independently (as it already works)
• When user is not searching, allow the user to keep one accordion open at a time type="single" collapsible
  • the opened accordion collapses if it gets a second click on its header trigger

It works fine, here is the relevant code:

{/* @ts-ignore */}
<Accordion.Root
  onValueChange={onAccordionChange}
  type={Array.isArray(activeAccordion) ? 'multiple' : 'single'}
  value={activeAccordion}
  collapsible
>
  {keys.map((key) => (
    <Accordion.Item key={key} value={key}>

Problem 1:

• Accordion.Root collapsible is defined in typescript to be used when type=single but not when type=multiple

const Root: React.ForwardRefExoticComponent<(Accordion.AccordionSingleProps | Accordion.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>
Type '{ children: Element[]; onValueChange: (state: string | string[]) => void; type: "single" | "multiple"; value: string | string[] | undefined; collapsible: boolean; }' is not assignable to type 'IntrinsicAttributes & ((AccordionSingleProps | AccordionMultipleProps) & RefAttributes<HTMLDivElement>)'.
  Type '{ children: Element[]; onValueChange: (state: string | string[]) => void; type: "single" | "multiple"; value: string | string[] | undefined; collapsible: boolean; }' is not assignable to type 'AccordionSingleProps'.
    Types of property 'type' are incompatible.
      Type '"single" | "multiple"' is not assignable to type '"single"'.
        Type '"multiple"' is not assignable to type '"single"'.ts(2322)

Problem 2:

• I get this warning in browser runtime: Warning: Received `true` for a non-boolean attribute `collapsible`

Final Question

Is it possible to change the type from single to multiple on the fly and still get a better typescript typing for the collapsible property? What are the maintainers considerations here?

This discussion is inspired by #1938

Thank you.

[benoitgrelard]

Hey @felquis,

Yeah unfortunately the type hasn't been designed to be changed dynamically from the TS types perspective.
This is because we use type to determine the static types so that value and onValueChange are accurate (ie. array of values, vs. single value), as well as the presense of collapsible only for type="single".

So, although technically changing type dynamically will work correctly, you will likely have to fight with the types.

However, I do wonder if what you are trying to achieve results in bad UX for users anyway as by changing the conditions from under them based on the situation, you are breaking the user's expectations potentially.