Skip to content

[Select]: clearable defaults to true #745

Description

@ly-tempel-bitweb

Problem

tedi-select's clearable defaults to false, while text fields in tedi-form-field are clearable by default since #572. Date and time fields and tedi-search are clearable by default too, so Select is the odd one out.

React is heading the same way: its Select already has isClearable = true, and the deprecation note on isClearIndicatorVisible says a future major will let isClearable alone control the visible clear button, "matching react-select and the Angular implementation".

clearable also has no booleanAttribute transform, so a bare <tedi-select clearable> passes "" and counts as false. tedi-form-field had the same bug before #572.

Select also treated an empty-string value as a selection. With the clear button on by default, a select bound to new FormControl('') would show a clear button with nothing selected and no placeholder.

Solution

  • Default clearable to true and add transform: booleanAttribute, so the bare attribute works.
  • Pagination: [clearable]="false" on its page-size tedi-select. The page size must always have a value.
  • Table demo: [clearable]="false" on the editable location cell's tedi-select (table-demo.constants.ts), which needs a location.
  • Empty strings: null, undefined and '' all mean nothing is selected, so new FormControl('') starts the select empty with its placeholder. Picking an option whose value is '' leaves nothing selected too. The stored value is unchanged.
  • Select stories: clearable now defaults to true in the Default story, and the docs table shows the new default. The showClearOnInteraction story (feat(form-field,select,search): add clear button interaction option #569 #737) already sets clearable explicitly, so it's unchanged.

Breaking changes

  • Selects that showed no clear button now show one once they have a value. Pass [clearable]="false" to opt out.
  • An option with value '' now leaves the select empty instead of showing as selected. Use showSelectAll for "select all" in a multiselect, or the placeholder to label the empty state.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

tedi-readyTEDI-Ready component issue

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions