mdb-material-chips Does Not Add New Tag On Enter On Android

Topic: mdb-material-chips Does Not Add New Tag On Enter On Android Devices Using Chrome

ewgiddings free asked 5 years ago

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?

ewgiddings free 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 free 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 free 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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

1 0 Best answer

For now you can try to use this workaround:

HTML:

TS:

<pre class="prettyprint"><code> @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);
 }
</code></pre>

Of course you can attach the <code>onClick()</code> method to other element, here is the example for space bar:

Hope that helps for now. We will continue our work to resolve this problem.

Please insert min. 20 characters.

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 free 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 free 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 free 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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

164Support score
21Questions 7Answers 0Snippets