angular
docs(chips): Chrome mobile using in a form with multiple inputs; pressing "Enter" focuses the next input instead of adding the chip
In Chrome mobile, if using mdChips in a form with additional inputs after mdChips (whether those inputs are more mdChips or normal text inputs or textareas), pressing "Enter" focuses the next input instead of adding the chip and keeping focus. This is only applicable if the form elements are inside the same form element, which is why it's not noticeable on the demo page (the first mdChips element is inside its own form, the rest aren't in a form). As a result, unless md-add-on-blur is enabled, it's not actually possible to add a chip in Chrome mobile in a form with inputs after mdChips (using md-add-on-blur comes with its own issues, though).
What is the expected behavior?
Pressing the enter key on a mobile device should add the chip and retain focus on the active mdChips.
What is the current behavior?
Pressing the enter key places focus on the next element after mdChips and the text remains in the mdChips input, without being added as a chip.
Demo:
https://plnkr.co/edit/k1uHjCtq7nF8GScObBrC?p=preview
Detailed Reproduction Steps:
- Add a chip using the first form (it will work)
- Try adding a chip in either of the mdChips in the second form. It won't work.
Which versions of AngularJS, Material, OS, and browsers are affected?
AngularJS: 1.6.6 Material: 1.1.6 OS: Android 7.1.2, Android 5.0.1 Browser: Chrome 62.0.3202.0, Chrome 63.0.3239.111, Chrome Beta 64.0.3282.99, Chrome Canary 65.0.3325.0
Is there anything else we should know?
I've tested this in Firefox mobile on Android and this issue is not present. I don't have access to an iPhone to see if the issue exists on Safari or Chrome for iOS.
This appears to be a Chrome issue...not sure if there's anything that can be done on Material's side. The keydown event listener is simply not being fired if the currently focused input is not the last input in the form.
See https://plnkr.co/edit/ReNeRbPX0lFFRr8SQGkM?p=preview.
The keydown event listener is working in Chrome 61.0.3163.98 on Android 5.0.1. It is not working after upgrading to Chrome 63.0.3239.111.
I reported the bug to the Chromium team: https://bugs.chromium.org/p/chromium/issues/detail?id=804622.
@Splaktar The Chromium team has confirmed this issue is on their end and was introduced in Chrome 62.0.3180.0. md-add-on-blur is a suitable workaround in the meantime.
@caseyjhol using space or comma is possible as well. This CodePen shows how to do this. Of course the tough part is communicating to your users which keys create a new chip.
I agree that this is a bit confusing, but it's really up to the Webkit/Chrome/Safari teams on what kind of event behaviors they will support. Thank you very much for investigating!
@Splaktar Yea, it's unfortunate they won't be implementing a fix. Perhaps the documentation should be updated to communicate that to other developers? I imagine the vast majority of users who'll actually be interacting with mdChips will probably be using Chrome (on either Android or iOS), and developers will need to implement either md-separator-keys or md-add-on-blur in order for this to work. I could see it being especially confusing, considering up until a few months ago, it worked without either of those attributes.
@caseyjhol good point. I've updated the title and labels. I would love to see a PR that adds these details to the directive's docs. Here is the file that needs to be updated.