Tabs wrapper drops defaultSelectedKey and keeps duplicate underline state

[kemuru]

File: src/lib/pagination/tabs.tsx

The bug:

function Tabs({ items, ..., defaultSelectedKey, ...props }) {
  const [selectedKey, setSelectedKey] = useState<Key | undefined>(defaultSelectedKey);
  // ...
  return (
    <AriaTabs {...props} onSelectionChange={handleSelection}>

defaultSelectedKey is destructured out of props before the spread, so it never reaches AriaTabs. The wrapper then maintains its own selectedKey state purely to render the underline highlight. Consequences:

Passing only selectedKey: panel is controlled, underline stays at undefined until the user clicks.
Passing only defaultSelectedKey: underline correct, but AriaTabs falls back to its first item (no default).
Every controlled caller has to pass both keys.
External changes to selectedKey (e.g. URL navigation) don't update the underline.
Suggested fix: forward defaultSelectedKey to AriaTabs, drop the wrapper's own state, derive the underline highlight by reading AriaTabs' selected state via TabRenderProps/useTabsContext instead of duplicating it.

[tractorss]

Found the same issue while consuming in foresight

Asked claude to check for other components too.

========= AI ==========
Same root cause shows up in three other components — worth folding into this fix since they're all "prop is advertised, then eaten".

DropdownSelect — src/lib/dropdown/select/index.tsx

SelectProps extends AriaSelectProps, so onSelectionChange is part of the public type, but it's hardcoded after the spread and silently wins:

<AriaSelect
  className={cn("flex flex-col gap-1", className)}
  {...props}
  onSelectionChange={handleSelection}
  aria-label={label ?? "Select"}
>

A consumer passing onSelectionChange gets nothing — only the bespoke callback fires. aria-label is in the same position, so it can't be overridden either. Fix: merge the consumer's handler into handleSelection (call both), and put {...props} last for anything meant to be overridable.

Slider — src/lib/form/slider.tsx

Identical shape. SliderProps extends Omit<AriaSliderProps, "orientation" | "formatOptions"> keeps onChange in the public type, then:

<AriaSlider className={cn("mt-4 box-border w-125")} {...props} onChange={callback}>

callback discards the consumer's onChange.

DropdownCascader / DropdownContainer — src/lib/dropdown/cascader/

The closest analogue to the Tabs bug. index.tsx correctly forwards selectedKey/defaultSelectedKey to AriaSelect, but then collapses both into a single prop for the inner container:

<DropdownContainer {...{ isOpen, items, defaultSelectedKey: selectedKey ?? defaultSelectedKey, ... }} />

and dropdown-container.tsx seeds local state from it:

const [selectedKey, setSelectedKey] = useState<Key | null>(defaultSelectedKey ?? null);

The useState initialiser only runs on mount, so with a controlled selectedKey the trigger button's label updates while the tree's highlighted item never moves. The useEffect that watches defaultSelectedKey re-syncs expandedKeys only, not the selection. Same remedy as proposed here: drop the duplicate state and derive from the collection's actual selection.

Separate smell in the same file, for a maintainer's judgement rather than a bug claim: expandedKeys is passed to the Tree as a controlled prop, but onExpandedChange only calls scrollToLevel and never setExpandedKeys — so user-driven expand/collapse is discarded and expansion can only change as a side effect of selection. That may be intentional for a cascader.

Checked and clean on this axis: Accordion / AccordionCustom (own the state, nothing underneath to desync — though defaultExpanded only seeds useState and there's no controlled expanded prop, so consumers can't drive or reset it), Copiable, FileUploader, useBigNumberField (its defaultValue is the field's own uncontrolled seed, with value handled separately).

Two rules that would catch the whole family:

Spread {...props} last, or explicitly merge — anything hardcoded after it is a prop the type promises and the component eats.
Never mirror a react-aria selection into local state for styling; read it from the render props (({ isSelected }) => …) instead.