Skip to content

ListBox doesn't properly restore the search box input #26

Description

@pillowfication

When using the showSearch and searchLimit properties, the search input will clear itself despite the filter still being applied.

  1. Create a ListBox with showSearch={true} and searchLimit={10}, and with more than 10 options.
  2. Input some filter text into the search area.
  3. Filter the options externally so that there are fewer than 10 options, and the search area is hidden.
  4. Undo the filter to restore the search area.
  5. The search filter is still applied, but the search input is blank.
const options = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten']

const MyComponent = (): JSX.Element => {
  const [filter, setFilter] = useState(false)
  const toggleFilter = (): void => { setFilter(!filter) }

  return (
    <ListBox
      showSearch
      searchLimit={5}
      actions={[<IconButton key='filter' onClick={toggleFilter}><Filter /></IconButton>]}
      items={options
        .filter((_, index) => !filter || index < 3)
        .map(option => ({ name: option, value: option }))}
      onChange={() => {}}
    />
  )
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions