Accordion.Item open by default ?

[rugged patio]

How can an accordion item be opened by default ?

[fallen skiff]

<Accordion defaultValue="valueOfAccordianItem">

[rugged patio]

The accordion is still closed by default 🤔

[fallen skiff]

Works fine for me. https://codesandbox.io/s/condescending-burnell-ww7x03?file=/src/App.tsx

[rugged patio]

Ah, great, thanks! Not very intuitive though 🤔

[topaz oar]

each item has a value, matching the value of that item causes it to be opened

if you enable multiple opened you can match with an array of strings, maybe this will clear it up:
https://mantine.dev/core/accordion/#control-state

[fallen skiff]

Personally, it's very intuitive. It's similar to the defaultValue for the Select component <Select defaultValue="value" data={...}>.

But to each their own 🙂

[rugged patio]

Hmm, that if Accordion has defaultValue="flexibility", and an Accordion.Item has value equal to "flexibility", then it's intuitive that that Accordion.Item is open and not closed ? 🤔

It works at least 🙂

[topaz oar]

accordion's value represents what is open, seems pretty logical

[rugged patio]

How is that logical ? 🤔

[topaz oar]

well what other way would you say makes more sense?

• an accordion contains items
• each accordion item has a value
• specifying a value for the accordion opens the item with that value

all other components work like this, e.g. MultiSelect value prop

[rugged patio]

Yes, it was this : "specifying a value for the accordion opens the item with that value" that I didn't find very intuitive. Maybe it would have been more intuitive with "defaultOpenedValue" instead of "defaultValue", or something like that, specifying that it has something to do with "state", and not just "value"

[topaz oar]

this would break the naming scheme all other components use

all components use value, defaultValue, onChange etc.

and defaultValue is not state, value is

[rugged patio]

Ah, yes, there is always a downside I suppose ...

Exactly, "defaultValue" has something to do with a value, and not if an accordion item has its state set to opened or closed

[topaz oar]

well, what else is an accordion's value going to be?

value is state

import { MultiSelect } from '@mantine/core';

const data = [
  { value: 'react', label: 'React' },
  { value: 'ng', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'vue', label: 'Vue' },
  { value: 'riot', label: 'Riot' },
  { value: 'next', label: 'Next.js' },
  { value: 'blitz', label: 'Blitz.js' },
];

function Demo() {
  const [value, setValue] = useState([]);
  return <MultiSelect value={value} onChange={setValue} data={data} />;
}

take MultiSelect as an example

value in this case is what values are selected

this is the same with accordion - value represents what accordion items have been selected and hence opened

[rugged patio]

Yes, that makes more sense than the accordion - accodion.item setting

[topaz oar]

both components store an internal state

value and onChange is used to control that internal state

defaultValue is used to provide a placeholder internal state

Accordion behaviour is controlled by state, like MultiSelect, and like most Mantine/react components

simply, providing a value or defaultValue tells accordion what the internal state should be

[rugged patio]

Yes, I get the point, but it makes a lot more sense with MultiSelect compared to Accordion and Accordion.Item, because here the value is not really assigned, it's just an Accordion.Item with its state "opened"

[topaz oar]

it's the same with Tabs
https://mantine.dev/core/tabs/#controlled-tabs

[rugged patio]

Oki, thanks 👍

[pastel gate]

Hello! why defaultValue in Accordion doesnt change when i change it in another function?

[dapper relic]

use value instead of defaultValue

[pastel gate]

when i use "value", i can't close or open accordion item... 😦

[fallen skiff]

You set value and onChange