angular / angular/components

feat(autocomplete): Multiselect (chips input)

Offen
#25,999 1 Kommentar 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

Ability to select multiple entries from autocomplete.
https://material.angular.io/components/autocomplete/overview

### Use Case

For example when using with chips.
![multi-chip-select](https://user-images.githubusercontent.com/60390085/202438855-1b2226ba-a050-489b-b4a1-bc3bc383bbb7.gif)

Btw. it would be also nice if the chip select does not wrap and scroll horizontal instead or truncate (overflow hidden) with annotation of count of additional chips like `(Chip 1) (Chip 2) +3` (means 5 chips, 2 visible, 3 hidden to prevent wrapping / changing height of input). Not tested but mabye the autocomplete select position may not updated when the input height is change while the overlay (list) is displayed.

Update: Ok this can be achieved by adding `mat-checkbox` to the options. So this feature request is maybe more about to add an example to the docs. Or what do you mean? It's maybe not that easy. The checkbox checked state must be synced with the selected chips. Also prevent closing autocomplete by click. preventDefault or stopPropagation doesn't work. etc.

https://material.angular.io/components/chips/examples

Update: Another quick solution would be to just keep the autocomplete list overlay open while click on items to add to the chip list.

Update: [Here](https://stackblitz.com/edit/angular-sx79hu-urvop3?file=app/multiselect-autocomplete-example.html) is an example. It's not from me, it's forked and might be polished. Just for inpriation. For example you need a div inside the option with click event to prevent close (stopPropagation/preventDefault). We can optimize this and add it to the examples. But since this is a little bit "hackish" we should consider to officially support this. Or give options to prevent close etc. I would not use a wrapper object for `selected` property. I would just bind checked to a method to check if value array includes item. And pointer-events none for the mat-checkbox (toggle only by option itself).

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der im Issue verlinkten Dokumentation zu Angular Material autocomplete und chips und prüfe anschließend das referenzierte StackBlitz-Beispiel. Kläre, ob das Ziel ein offiziell unterstütztes Multiselect-Verhalten, eine Option zum Offenhalten des Overlays oder lediglich ein Dokumentationsbeispiel ist. Als abgeschlossen gilt die Festlegung eines vereinbarten Umfangs sowie des entsprechenden Beispiels oder API-Verhaltens; Tests und Dokumentation sollten bei Bedarf aktualisiert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.