chips: regression to component focus in 1.1.2

[sivakrrish1994]

Actual Behavior:

• md-chips focus is being applied only inside md-chip-input-container
• Focus should be there through out the md-chips

Angular Versions: *

• Angular Material Version:1.1.3

[cmacdonnacha]

How are you setting focus to it?

[sivakrrish1994]

@cmacdonnacha Still I have not done. Concerned party has to fix the code. Previously in angular material version: 1.1.1 it was working fine while in v1.1.3, they might have missed to add md-focused on md-chips-wrap when a click is made on it.

v1.1.1: https://material.angularjs.org/1.1.1/demo/chips
v1.1.3: https://material.angularjs.org/latest/demo/chips

[cmacdonnacha]

@sivakrrish1994 I ran into a similar issue. Trying having a look at my last comment on this issue:

[tyrdavis]

Seeing the same thing. To clarify on the issue, if you click on the far right of the chips component (a part of it that doesn't have the chip-input-container directly under your click) in the 1.1.1 docs, the chip-input-container will be focused, while the same action in 1.1.3 docs does nothing.

[sivakrrish1994]

ya @cmacdonnacha that's one of the option but literally this functionality needs to be implemented by the material team.
Let us wait for the material team to fix this issue @cmacdonnacha @tyrdavis

[rajathms]

+1 for this feature

Till then any workaround would be appreciated.

[jpike88]

This is a serious usability bug... how is this being overlooked? +1

[emdotem]

Same here, 👍

[jpike88]

Sorry @matteomartinelli, it’s time to fork it. They stopped development on it ages ago. But it’s worth using!

[dhwang-xactly]

What's the difference between 1.1.1 and 1.1.3+? In addition the the click on right side not triggering the focus, you will also notice that the placeholder text is truncated because default input box is not wide enough to show the full placeholder text.

[dhwang-xactly]

Workaround CSS using flex layout.

.md-chips {
  display: flex;
  flex-flow: row wrap;
  box-shadow: none;
}
/* make input box full width of md-chips */
 .md-chip-input-container {
  flex: 1 1 auto;
}