chips: editable chip gets removed after editing

[giricr]

Bug

AngularJS Material Demo and steps to reproduce the issue:

AngularJS Material Demo which demonstrates the issue:

Detailed Reproduction Steps:

1. Select an editable chip (in section: Basic Usage > Make chips editable) by single click.
2. Press Space-bar / Return key to enter edit mode
3. Modify the content (NOTE: make sure not to press any arrow keys or click with mouse once you are in edit mode)
4. Press Return (or click outside).

What is the expected behavior?

new value should become a chip again

What is the current behavior?

new value is removed

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

This is basic functionality that should work

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.9
• AngularJS Material: 1.1.9 (above 1.1.1)
• OS: Linux, Mac OS, Windows
• Browsers: Chrome, Firefox, Safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

There are couple of other issues

1. clicking on the last character in chip removes the chip. Looks like the icon is too close to chip text content and click is actually on button
2. Pressing right arrow after step 2 of reproduction steps will result in unstable state where chip looks as if it is in edit mode, but there is no cursor and further keystrokes will not edit the text content!

[Splaktar]

Unfortunately, this looks like another regression caused by the chips accessibility PR in 1.1.2. It's hard to believe that there isn't a unit test for this functionality. Thank you very much for opening this!

[Liave]

Hi,

Is there a workaround for this bug?

Liav

[Splaktar]

@Liave the only current work around is to use AngularJS Material 1.1.1.

[Splaktar]

This appears to be caused by a caveat in http://api.jquery.com/children/. Notably:

Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes, use .contents().

It's unclear how this ever worked unless the chip contents were not stored in a text node before the changes in PR #9650.

I also fixed an issue where selecting and chip and then right clicking it would enter edit mode. The double click detection was very naive. I switched it to use jQuery/JQLite's dblclick event and that fixed it.

I'm going to address the issue with pressing the right arrow when in edit mode in a separate issue.