search

tremorlabs / tremor

React components to build charts and dashboards
https://npm.tremor.so
Apache License 2.0
16.22k stars 467 forks source link

[Bug]: Tremor Tabs not defaulting to value #1088

Closed kamigerami closed 5 months ago

kamigerami commented 5 months ago

Tremor Version

3.17.2

Link to minimal reproduction

https://stackblitz.com/edit/stackblitz-starters-fkehdz?file=app%2Fpage.tsx

Steps to reproduce

Set defaultValue for the TabList refresh page.

What is expected?

the tab to be on the default value

What is actually happening?

its picking the first one

What browsers are you seeing the problem on?

Chrome, Safari

Any additional comments?

No response

severinlandolt commented 5 months ago

Hi @kamigerami, the design for defaulting to a tab is a bit different. You can default to tabs (uncontrolled) by setting a defaultIndex in the TabGroup, not TabList.

More about this here: http://localhost:3000/docs/ui/tabs#api-reference-tabgroup

 <TabGroup defaultIndex={0}>
      <TabList>
       ...

It's an older API which will change in v4. I highly recommend using our copy paste variant, which you'll find here: https://raw.tremor.so/docs/ui/tabs

kamigerami commented 5 months ago

oh ok I see, so for controlled components I need to use the raw versions. Got it thnx

severinlandolt commented 5 months ago

Hi! Not necessarily, you can also use it in a controlled manner → https://storybook.tremor.so/?path=/docs/ui-input-tabs--docs#controlled

I suggested the Raw Component to you, because the API is closer to what you initially shared :)