Skip to content

Select and InputSelect ignore controlled value prop updates #5

Description

@alx-so

Problem

Select and InputSelect initialize local value state from props.value, but they do not sync local state when the parent changes the controlled value later.

This makes the components behave like uncontrolled components even when a value prop is supplied.

Impact

Parent-driven resets, form state updates, async defaults, and controlled selection changes are ignored after mount. Consumers can render stale selected values even though their state has changed.

The components also call onChange from a useEffect on initial mount, which can surprise controlled consumers by emitting a change event before the user acts.

Code references

  • src/components/Select/Select.tsx#L60: local value is initialized from props.value once.
  • src/components/Select/Select.tsx#L97-L100: onChange fires from local state changes, including initial state.
  • src/components/InputSelect/InputSelect.tsx#L44: local value is initialized from props.value once.
  • src/components/InputSelect/InputSelect.tsx#L70-L73: onChange fires from local state changes, including initial state.

Acceptance criteria

  • Define and document controlled versus uncontrolled behavior for Select and InputSelect.
  • When value is controlled, rendered value follows prop changes from the parent.
  • User selection still calls onChange with the next value.
  • Initial render does not emit an artificial onChange unless that behavior is explicitly documented and tested.
  • Regression tests cover parent-driven value reset/update for Select and InputSelect.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: controlled-stateControlled and uncontrolled component statebugSomething isn't workingpriority: criticalMust fix before the next release

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions