Repository navigation
feat(ui-ng): add a dropdown mode and localisable strings to flr-multi-select - #643
Conversation
![ferrfleet[bot]](https://avatars.githubusercontent.com/in/4354888?s=60&v=4){kind=small}
There was a problem hiding this comment.
One blocking finding: the dropdown panel reimplements positioning and outside-click dismissal that the library already gets from CDK overlay (see flr-menu), and it will clip inside overflow containers. Apart from that, the listbox ARIA, the focus return on Escape, the localisable strings and the checkbox mask change look correct.
| } | ||
| } | ||
|
|
||
| protected onListKeydown(event: KeyboardEvent): void { |
There was a problem hiding this comment.
Nit: ActiveDescendantKeyManager from @angular/cdk/a11y already handles the arrow, Home and End navigation and the active index (with withWrap(false), withHomeAndEnd() and typeahead for free). Hand-rolling it here is fine, but if you move to the CDK overlay anyway, using the key manager would shrink this switch to just the Space/Enter and ArrowUp-to-search cases.
## [1.44.0] - 2026-10-06 ### Features - feat(ui-ng): add a dropdown mode and localisable strings to flr-multi-select (#643)
1 participant
Closes #642
modeinput onflr-multi-select:list(default, same layout as before) ordropdown. The dropdown trigger matchesflr-select(height, border, radius, chevron, focus ring) and shows the placeholder, the single picked label, or the count. The panel sits under the trigger inside the host, so it inherits the tokens set around it, and holds the search and alistbox(aria-multiselectable,aria-activedescendant). Outside click and Escape close it, Escape returns focus to the trigger, ArrowDown/Up open it, arrows/Home/End move, Space/Enter toggle, tabbing out closes it.--flr-rule, fill--flr-accent, check colour--flr-accent-inkfalling back to--color-on-accentthen white. The native input stays (visually hidden) in list mode.placeholder,selectedText(a(count) => string, so plurals work) andclearText, defaults keep the current English.idlands on the trigger so a<label for>works.flr-checkboxcheck mark now takes--color-on-accenttoo (white stays the default), so it stays readable on light accents.MultiSelectDropdownstory with a play function covering open/close (click, Escape, outside click), toggling through the form control, summary text for 0/1/many and keyboard toggling.flr-tree-selectstill has the native checkbox and hardcoded strings, left for a follow-up.