Components: Add autocomplete example to chips documentation.

[topherfangio]

Bug, feature request, or proposal:

Feature request.

What is the expected behavior?

In order to better understand the interaction between components, users want an example of how to utilize the MdAutocomplete with the MdChipList.

What is the current behavior?

There is no current example.

What are the steps to reproduce?

N/A

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

N/A

What is the use-case or motivation for changing an existing behavior?

N/A

Which versions of Angular, Material, OS, browsers are affected?

All

Is there anything else we should know?

[JakobSegerslatt]

I did this by adding the autocomplete inside a disabled md-basic-chip since i wanted it to wrap properly and be a part of the list.

Then the autocomplete just adds to the "chips"-list on select, but that logic exists in the current autocomplete doc.

<md-chip-list>
      <md-chip *ngFor="let chip of chips">
        <span>{{ chip .Name }}</span>
        <span (click)="removeChip(chip )">x</span>
      </md-chip>

      <md-basic-chip disabled="true">
         // insert autocomplete example here.
      </md-basic-chip>
</md-chip-list>

[topherfangio]

@JakobSegerslatt Indeed, with a disabled set of chips, this is definitely achievable. The difficulty comes in when you want to allow users to select from the autocomplete, or add their own via the forthcoming mdChipInput.

I'm currently working on adding this functionality, but we need to discuss how to handle component interoperability. Particularly:

1. How do we handle keyboard navigation? Right now, both the Autocomplete and the Chips watch for LEFT/RIGHT/UP/DOWN and it causes conflicts.

2. The Autocomplete automatically updates the attached input with the selected value, but it doesn't fire the ENTER keypress which would trigger the (chipAdded) event. And oddly, the Autocomplete's (select) event is emitted before the input value is updated, so it there is not currently a way to add the chip properly without a setTimeout() :-/

We're looking at how to best address these issues before moving forward. Also, I'm waiting until #2476 gets merged as it contains many updates including the mdChipInput directive.

[spencerolsen]

Is this something that will be implemented in the near future? And updates on the progress?

[webmutation]

What is the status of this? I could not find an example yet or a PR that closes this issue.

[JakobSegerslatt]

You can now place a chiplist inside a md-input-container/md-form-field. Have a look at the examples at https://material2-dev.firebaseapp.com/chips
Src at: https://github.com/angular/material2/tree/master/src/demo-app/chips

Havn't tested adding autocomplete to the form-field but it shouldn't be a problem.

[visurel]

Having an example with autocomplete would definitely still be helpful. It's possible, but it's unclear on how to structure it correctly and how to use a formControl with it.

[chriszrc]

With the addition of the md-input-container/md-form-field support, would it be possible to combine the chips with a md-select (multi)?

[henryavila]

This is really nedded.
I need a implementation of a Contact Chips like in version 1: https://material.angularjs.org/1.1.2/demo/chips#contact-chips

It would be great if the Material2 implements a contact-chips. Don't need to be exactly like the older, but has the same idea.

[axtho]

Here is a way towards a solution (it is very basic), until there is an official one: https://angular-material2-issue-v5gpri.stackblitz.io . Maybe it can help someone get started.

https://stackblitz.com/edit/angular-material2-issue-v5gpri

[chriszrc]

Nice! Ha! I ended up doing something similar, I needed chips with multiselect, and I put the select below the chips, and made the value of the select hidden, and then synced the chips model with the selections from the multiselect

[axtho]

@chriszrc did you hide the input value of the matInput? If so, how? Been trying to do this via ViewChild, but no luck.

[axtho]

This also works, expect that you would need to unset the focus of the input field so you can activate the autocomplete again:

       <mat-form-field floatPlaceholder="never">
            <mat-chip-list #chipList>
                <mat-chip *ngFor="let value of statusSelected" (remove)="removeStatus(value)">
                    {{value}} <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
                <input [matChipInputFor]="chipList"
                       [matAutocomplete]="auto">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addStatus($event)">
                <mat-option *ngFor="let state of status" [value]="state.id">
                    <span>{{ state.name }}</span>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>

[chriszrc]

I did hide the input value, but with the very quick and dirty and not
recommended global style in my main style.scss:

 .my-chips-component {
   md-select.text-hidden .mat-select-value-text{
     display:none;
   }
 }

On Thu, Oct 5, 2017 at 3:27 AM, Thomas Hochstetter <[email protected]

wrote:

This also works, expect that you would need to unset the focus of the
input field so you can activate the autocomplete again:

   <mat-form-field floatPlaceholder="never">
        <mat-chip-list #chipList>
            <mat-chip *ngFor="let value of statusSelected" (remove)="removeStatus(value)">
                {{value}} <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
            <input [matChipInputFor]="chipList"
                   [matAutocomplete]="auto">
        </mat-chip-list>
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addStatus($event)">
            <mat-option *ngFor="let state of status" [value]="state.id">
                <span>{{ state.name }}</span>
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/3273#issuecomment-334381561,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYgWKS96qQgNeq3q7j4EhCAl4i_qjIZuks5spITwgaJpZM4MKpBn
.

--

Chris Marx
ZevRoss - Know Your Data
Data Science & Spatial Analysis
New website: www.zevross.com
Ithaca, NY

[axtho]

here is an update to the autocomplete chips starter ... it has two issues:

1. The input should loose focus after selection, otherwise one needs to click outside before selecting a second option
2. When you enter a new tag (+ Enter) it gets saved to the array, but the string remains on the input

Maybe someone has a solution for these. If the two issues could be solved then we have a good working example, until we get something official (which, I guess, will be tons better).

Here is the Stackblitz:
https://angular-material2-issue-v5gpri.stackblitz.io
https://stackblitz.com/edit/angular-material2-issue-v5gpri

[Masov]

@axtho If you want to clear the field after entering a new tag you can use this ugly solution:
this.chipInput['nativeElement'].value = '';

[axtho]

@Masov thanks.

I have put all of this into the stackblitz example (updated). So there we have a tags component that does most of what we would want from autocomplete and chips. Maybe someone improves this as well, since it may not be the most efficient way to do this.

Oh, and best of all ... it works with reactive forms. You're welcome.

https://stackblitz.com/edit/angular-material2-issue-v5gpri

Until we all get an official example 👍
_Happy coding_

[eyalhakim]

@axtho thank you very much for this!
However, i don't see that typing filters the autocomplete.
Also, when clicking on an autocomplete option the input text doesn't clear.

Are these known limitations or bugs?

Thank you

[sternetj]

@eyalhakim I borrowed the example that @axtho made and modified it to meet my needs. Perhaps it will work for you. I added the ability to filter based on what is being typed and the ability to add or not to add new tags (via an input) https://stackblitz.com/edit/angular-material2-issue-qbzcst

[eyalhakim]

@sternetj that is a great implementation, i will definitely use some of your code, thank you!

You do have a strange behavior though when "allowAddNew" is set to "true" - if i select a certain item from the list after only writing a part of that word in the input, both the existing value from the list is added as a chip and the new value that i wrote in the input (the partial).

[eyalhakim]

Also, @sternetj, i see that adding validators (tried adding email validator) doesn't affect the control at all.

[axtho]

@eyalhakim the implementation I started was just a kind of proof of concept, which has a few ceveats. I checked the example of @sternetj and could not reproduce your issue.

As to validators: what would you like to validate? If there are chips included?

If you (or others) have improvements you could add them in forking the stackblitz example. Otherwise, we could start a npm component until there is something official.

[eyalhakim]

@axtho, try typing "fly", then clicking one time the "arrow down" to select the option "flying" and then click enter.

Regarding validation, i would want to validate the content of each chip before adding it.
For example, i would only want to allow adding chips that contain email addresses.

You can get an inspiration of this feature from:
https://github.com/Gbuomprisco/ngx-chips

Regardless, i think it's a great idea to open a repository for this component until the official one is done.

Would you like to start it and add us as contributors?

Thanks!

[sternetj]

I fixed it so it won't add the text in the box if you are selecting an option in the list. My use case did not allow adding new values that were not in the sources list or any validation so those features are likely to have some issues.

[axtho]

@eyalhakim I have added the component here. You are welcome to collaborate if you so desire.

The repo does compile, but it does not run the demo app yet. I have also not tested it in my own application as yet. (Someone) feel free to work on this. I have no real desire to maintain such a component beyond necessity.

Btw, Covalent has a Chips component that works well.

[sternetj]

@axtho We were using covalent on the project I am working on now but we removed it to use an all Material approach and our load time in IE on Windows7 went from ~10 sec to <2 sec. On Windows 10 load times were on par with Chrome. If you have to support IE on Windows7 be cautious of using Covalent at least until the fully add IE support.

[axtho]

@sternetj I totally understand. We have also opted out of Covalent for similar reasons. That's how we got to creating this component in the first place. If you care to contribute you are welcome to do so (and I just add you)

[masterfloda]

This is very helpful, but I'm struggling to implement a http autocompleter, because I don't know how I would trigger it. With a regular autocompleter, you can simply subscribe to FormControl.valueChanges, but the matInput does not have a FormControl and this.chipInput is an ElementRef that does not have the stateChange observable... Any ideas?

Update: It turned out to be way easier than expected: Just add a FormControl to the matInput

[timharris777]

I struggled with the stackblitz examples that were given above. I felt like they were overly complicated. As such, I have re-created the "autocomplete-chip-list" demo in a much easier to understand way (for me anyway). I hope this proves helpful to others.

https://stackblitz.com/edit/angular-evzmtq-javag8

[eyalhakim]

@timharris777 this is the best example so far. Can you make the list reappear automatically after selecting an option?

[axtho]

@timharris777 thanks, that looks a lot cleaner than the last example. I am missing the adding of a tag on enter. Also, i think it should loose focus when an option has been selected. Maybe you want to add this in, both of the last examples had that.

Additionally, it should demonstrate the ability to integrate the autocomplete list into a reactive form. So the example should present a component, that you could readily use. It think this would be helpful and was the reason for both the previous solutions.

[PaunCostin]

Did someone took a look into withTypeAhead() method from the autocomplete's `_keyManager' ?
It seem to do the trick but my tests were a little bit buggy (sometimes it seem to highlight an item and sometimes it didn't).

/** * Turns on typeahead mode which allows users to set the active item by typing. * @param debounceInterval Time to wait after the last keystroke before setting the active item. */ withTypeAhead(debounceInterval?: number): this;

from the class ListKeyManager<T extends ListKeyManagerOption>

[timharris777]

@axtho , looks like your use case is a little different than mine. I disabled the adding of a tag on enter because the only options I want available are the autocomplete options. You can enable that easily by changing one of the flags on the input for chips. Don't remember what the tag name is off the top of my head.

[timharris777]

@eyalhakim , it should be easy by just adding the command for showing the menu when a selection is made. If I get around to making the change I'll post a comment.

[Tynarus]

I made a quick fork of @timharris777 work to provide the ability to "keep" the autocomplete list open... Though it just re-opens are a few milliseconds. I'm sure someone can improve upon it, but here's my 5-minute rendition: https://angular-evzmtq-ppmysp.stackblitz.io

https://stackblitz.com/edit/angular-evzmtq-ppmysp

[jjreisfl]

Following on @Tynarus and @timharris777 example if you want to add new tags beside the options just add the (matChipInputTokenEnd)="addNew($event)" from @axtho example!

[ghost]

there is an alternate solution regarding this issue and it works absolutely fine for me.
I have added certain changes in autocomplete along with material chips but it's not the effective way
Add reactive forms module and implement with the link given below
https://stackblitz.com/edit/angular-ucxm2s

[Furqanaa]

Thanks guys your codes were very help full,
I followed this code
but I had a problem, When I choose a tag, the auto complete didn't appear until I click away.
How can I fix that? What are the things that I should take care of?

[ghost]

Try to insert this property in the input tag autofocus = ” true” so that it will automatically open the autocomplete even when you didn’t click.(but it’s not the good way)
It’s best to display the autocomplete when you click on it.
The autocomplete should be opened only when you focus on it.

From: FurqanShakir [mailto:[email protected]]
Sent: Monday, March 5, 2018 7:44 PM
To: angular/material2 [e-mail]
Cc: Suryaprakash Ramamurthy [e-mail]; Comment [e-mail]
Subject: Re: [angular/material2] Add autocomplete example to chips documentation. (#3273)

Thanks guys your codes where very help full,
I followed this code https://stackblitz.com/edit/angular-material2-issue-qbzcst?file=app%2Ftag.component.ts
but I had a problem, When I choose a tag, the auto complete didn't appear until I click away.
How can I fix that? What are the things that I should take care of?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/material2/issues/3273#issuecomment-370431074, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Ad2-jLtG-oHgWFbCURUGglaAj-D5FT2Eks5tbUgPgaJpZM4MKpBn.

[Furqanaa]

@suryaprakash07
I did this:

type script code:
public inputClicked(){
this.autofocus = true;
}

But still have the same problem, which is I have to focus out the input container and to focus again to see the proposed options.
this happened only after choosing a tag

[Furqanaa]

@suryaprakash07
I fix it using openPanel method mentioned here

Html code:

  <input [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="false"
           [matAutocomplete]="auto"
           (keydown.enter)="addTextChip(chipInput)"
           (input)="textChanged(chipInput.value)"
          (click) = "openPanel()"
           #chipInput />

 Type Script Code:

//declare the trigger
@ViewChild(MatAutocompleteTrigger) autoTrigger: MatAutocompleteTrigger;

// use the trigger to call openPanel method
 public openPanel(){
       this.autoTrigger.openPanel();
   }

[ghost]

Super. But also look into this which is an simple way of adding the chips https://stackblitz.com/edit/angular-ucxm2s

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: [e-mail]
Sent: Tuesday, March 6, 2018 1:47 PM
To: angular/[e-mail]
Cc: Suryaprakash [e-mail]; [e-mail]
Subject: Re: [angular/material2] Add autocomplete example to chips documentation. (#3273)

@suryaprakash07https://github.com/suryaprakash07
I fix it using openPanel method mentioned here https://material.angular.io/components/autocomplete/api

the code:
[matChipInputAddOnBlur]="false"
[matAutocomplete]="auto"
(keydown.enter)="addTextChip(chipInput)"
(input)="textChanged(chipInput.value)"
(click) = "openPanel()"

chipInput />

Type Script:
//declare the trigger
@ViewChildhttps://github.com/viewchild(MatAutocompleteTrigger) autoTrigger: MatAutocompleteTrigger;
// use the trigger to call openPanel method
public openPanel(){
this.autoTrigger.openPanel();
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/angular/material2/issues/3273#issuecomment-370699403, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Ad2-jO-9jspWbGGQKarTRLxf1nHgRYgYks5tbkYlgaJpZM4MKpBn.

[Aaron-Zhao]

Also inside a mat-form-field adding mat-chip-list with mat-autocomplete together breaks mat-error (doesn't show up).

[jelbourn]

This was done long ago.

[shishkinilya]

@Aaron-Zhao i have the same issue. It is a pity that there is no official component with autocomplete + chips + errors

[Aaron-Zhao]

@shishkinilya Yeah, consider this is the basic usage. I ended up to wrap around <mat-error> with a <mat-hint> as a workaround for this bug. It is not a perfect solution but at least it makes it working again.

[mhosman]

I think this is a must-have component.

[Furqanaa]

@mhosman They Implemented this component in angular material version 6

[ecentricmyjobs]

In the dash board I have field called "Primary Skills" when we are viewing the page in view mode it should not be editable. But I am able too edit the field.
Below is the code can any one please help me out on this

md-removable="removable" delete-button-label="Remove Tag"
delete-hint="Press delete to remove tag" secondary-placeholder=" " md-removable="true">

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}