Skip to content

Property filter Storybook stories are non-interactive (frozen controlled value) #8089

Description

@ironAiken2

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions