chips(editable): arrow keys and mouse clicks break edit mode

[Splaktar]

Bug, enhancement request, or proposal:

Bug

CodePen and steps to reproduce the issue:

Demo which demonstrates the issue:

https://material.angularjs.org/1.1.9/demo/chips

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. Press the right arrow key or click with mouse once you are in edit mode

What is the expected behavior?

With the text all selected (default behavior when edit mode starts), pressing the right arrow key should take the cursor to right after the last character. Left clicking with the mouse should take you to the position of the closest character.

What is the current behavior?

As mentioned in #11298, the chip content text is deselected and the cursor vanishes. It's mostly impossible to get back into a valid editing mode at that point.

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

Align with user expectations and standard interactions.

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

• AngularJS: 1.5-1.7
• AngularJS Material: 1.1.2-1.1.9
• OS: All
• Browsers: All

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

There are some additional issues on Firefox such as the cursor never being visible when edit mode is started via double click: #9820

Currently AngularJS Material uses HTMLElement/contentEditable for chip editing. However, as explained in the MDN Editable Content Guide, the editing experience across browsers is not consistent and often can be "painful". There may be a need to use another approach to have proper keyboard interactions or it may simply be an AngularJS Material component that is overriding or stopping propagation/default behaviors.

[marosoft]

What I can see is that an extra invisible character is added at the end of the text. That is why the cursor is not visible anymore after pressing the right arrow key.
When you press backspace afterwards it is going to remove it and from now on that chip should behave normally.

The problem seems to be related to this appended element (which is removed when pressing the backspace key):
https://github.com/angular/material/blob/master/src/components/chips/js/chipDirective.js#L61

Before removing that character:

After removing it:

There was a recent change to how the content of the chip is obtained (chipController, line 87): 9cc165f#diff-2ee862de1dea9ebeef51881db7e22534R87

[Splaktar]

The appended element is supposed to say

'Press delete to remove this chip.'

But it looks like it isn't resolving the $mdChipsCtrl when it is compiled in MdChip's postLink.

[Splaktar]

Just wanted to note that this is a regression that was introduced in 1.1.2.