Topic: mdb-material-chips Does Not Add New Tag On Enter On Android Devices Using Chrome
Expected behavior Using the "Adding new tag" method listed here: https://mdbootstrap.com/docs/angular/components/badges/ it says Press Enter to add a new tag to the input element. This adds a new tag to the input on Chrome on Desktop and iOS, but on Android devices pressing the blue Enter/Return does not add a new tag to the input. On my site it skips to the next input in the form.
Actual behavior Using the mdb-angular-chips component to add new tags does not work on Android using Chrome. It does not allow you to add a new tag. On my site it makes the input lose focus but leaves it without creating a new tag.
Resources (screenshots, code snippets etc.) You can most likely see this behavior on any site that uses it, but to see this behavior in my instance please go to www.tragoa.com and create an account. Then attempt to add a category to your profile (it will direct you to this page immediately upon registering). If you would like me to create a test account instead of you registering, please email me so I can send that info securely?
Question Is this a big, or how can I fix this odd behavior? If it is not a bug - what method creates this new tag and how should I be calling it?
For now you can try to use this workaround:
HTML:
<mdb-material-chips #chips [(ngModel)]="addtags" name="chips" (input)="onChange($event)"></mdb-material-chips>
<button mdbBtn color="primary" (click)="onClick($event)">Add tag</button>
TS:
@ViewChild('chips', { static: true }) chips: MaterialChipsComponent;
hideElement = true;
addtags: string[] = [];
value: string;
onChange(event: any) {
this.value = event.target.value;
}
onClick(event: any) {
this.chips.addValue(this.value, event);
}
Of course you can attach the onClick() method to other element, here is the example for space bar:
<mdb-material-chips #chips [(ngModel)]="addtags" name="chips" (input)="onChange($event)" (keydown.space)="onClick($event)"></mdb-material-chips>
Hope that helps for now. We will continue our work to resolve this problem.
ewgiddings commented 5 years ago
Thank you for the quick work around. I will implement that and keep an eye out for when this is resolved :) Can I ask you a favor to post on here when it is fixed so I do not need the work around or send me an email when it is fixed?
I appreciate your swift troubleshooting of helping me with a work around!
Arkadiusz Idzikowski staff commented 5 years ago
The fix should be available in 2 weeks (26.08). We will let you know in this thread.
ewgiddings commented 5 years ago
@Arkadiusz Idzikowski Will that fix require me to update to version 8? Or will it be patched in the version I am on too (7.5.4)?
ewgiddings commented 5 years ago
Also as a note I added this.value = ''; to the onClick event to reset the value string then disabled the add button if the value string was empty. Disabled adding a '' string and also double adding a value...
Please let me know about if this fix will be back ported to 7.5.4 when you get a chance? Or will this fix only be for the latest 8.x.x version?
Arkadiusz Idzikowski staff commented 5 years ago
Unfortunately this fix will be available only in next 8.x.x version.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: Google Pixel 3
- Browser: Chrome
- OS: Android
- Provided sample code: No
- Provided link: Yes
ewgiddings commented 5 years ago
The "Enter" button I was describing is a blue button with an arrow icon pointing to a line that looks like this: ->|
Also, as mentioned this is part of a form so when I press this Enter button it only switches the focus to the next input element with adding the tag as it does on every other device/os.
Bartosz Termena staff commented 5 years ago
Thank you for reporting this problem, we will take a closer look at that.
ewgiddings commented 5 years ago
@Bartosz Termena
Ok, please let me know if there is a work around to solve this while you take a closer look? This is breaking my website on Android devices and that is the most popular device for my users.
Is there a method I can call to have them be added as tags without pressing Enter/Return? I can maybe use the space bar being pressed to add the tag for the meantime on Android while this is being looked at? I would need to know a method to call to make that happen, is there one?
ewgiddings commented 5 years ago
@Bartosz Termena
Have you been able to see the issue? Is there any hope of it being fixed or finding a workaround? I still have not found a way so any help is appreciated. None of my users can add products to my website right now.