You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
Problem
tedi-select'sclearabledefaults tofalse, while text fields intedi-form-fieldare clearable by default since #572. Date and time fields andtedi-searchare 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 onisClearIndicatorVisiblesays a future major will letisClearablealone control the visible clear button, "matchingreact-selectand the Angular implementation".clearablealso has nobooleanAttributetransform, so a bare<tedi-select clearable>passes""and counts asfalse.tedi-form-fieldhad 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
clearabletotrueand addtransform: booleanAttribute, so the bare attribute works.[clearable]="false"on its page-sizetedi-select. The page size must always have a value.[clearable]="false"on the editable location cell'stedi-select(table-demo.constants.ts), which needs a location.null,undefinedand''all mean nothing is selected, sonew FormControl('')starts the select empty with its placeholder. Picking an option whose value is''leaves nothing selected too. The stored value is unchanged.clearablenow defaults totruein the Default story, and the docs table shows the new default. TheshowClearOnInteractionstory (feat(form-field,select,search): add clear button interaction option #569 #737) already setsclearableexplicitly, so it's unchanged.Breaking changes
[clearable]="false"to opt out.''now leaves the select empty instead of showing as selected. UseshowSelectAllfor "select all" in a multiselect, or the placeholder to label the empty state.