Problem
In Storybook, both BAIPropertyFilter and BAIGraphQLPropertyFilter stories are non-interactive: pressing Enter / clicking the search button does not add a filter tag, and the tag close button and the reset button do not remove tags. Every story appears frozen.
Root cause
Both components always render in controlled mode. They call useControllableValue({ value: propValue, ..., onChange: propOnChange }), and because the object literal always contains a value key, ahooks computes isControlled = hasOwnProperty(props, "value") as true regardless of whether the consumer actually passed value. In controlled mode the hook never keeps internal state — it renders exactly what the value prop holds and only calls onChange on updates.
The stories supply a no-op onChange (console.log(...) / action(...)) that never feeds the new value back into the value arg, so the displayed value never changes and the filters look broken.
Fix
Make the stories interactive by feeding onChange back into value via a meta-level render using Storybook useArgs, so the controlled value updates on interaction and the Controls panel stays in sync. No component change is required — the components work correctly when wired as controlled inputs (covered by the existing FR-2965 controlled-wrapper tests).
Scope
packages/backend.ai-ui/src/components/BAIPropertyFilter.stories.tsx
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.stories.tsx
JIRA Issue: FR-3232
Problem
In Storybook, both BAIPropertyFilter and BAIGraphQLPropertyFilter stories are non-interactive: pressing Enter / clicking the search button does not add a filter tag, and the tag close button and the reset button do not remove tags. Every story appears frozen.
Root cause
Both components always render in controlled mode. They call
useControllableValue({ value: propValue, ..., onChange: propOnChange }), and because the object literal always contains avaluekey, ahooks computesisControlled = hasOwnProperty(props, "value")astrueregardless of whether the consumer actually passedvalue. In controlled mode the hook never keeps internal state — it renders exactly what thevalueprop holds and only callsonChangeon updates.The stories supply a no-op
onChange(console.log(...)/action(...)) that never feeds the new value back into thevaluearg, so the displayed value never changes and the filters look broken.Fix
Make the stories interactive by feeding
onChangeback intovaluevia a meta-levelrenderusing StorybookuseArgs, so the controlled value updates on interaction and the Controls panel stays in sync. No component change is required — the components work correctly when wired as controlled inputs (covered by the existing FR-2965 controlled-wrapper tests).Scope
packages/backend.ai-ui/src/components/BAIPropertyFilter.stories.tsxpackages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.stories.tsxJIRA Issue: FR-3232