Materialize: Chip tags should be compatible with .prefix and labels, as with regular inputs

[joglr]

Please see the issue demonstrated and explained in this pen:

http://codepen.io/jonasroessum/pen/jAZBzK?editors=0110

[joglr]

The tag version of chips should look and work just like a regular text input out of the box.

This can be sortof implemented with some JS and CSS modifications, however this still needs to handle that the prefix should be active when a chip is focused/selected.

They are not the same height and even when applying height: 1em;, they are still not quite equally tall.

There is also a lot of other issues; however this is expectable, since it isn't documented that this _should_ work, but it should, really.

Another problem of this is that the chips are very tall, so the field will not be able to match the height of the normal input, unless the chips are made smaller.

[acburst]

Thanks so much for this well written and descriptive codepen.

I've fixed a bunch of issues in ab19628.

Let me know if this fixes your problems.

[joglr]

Thanks, this is great! This solved a lot of the issues, however, a few still remain.

• On mobile you can't delete tags, because pressing backspace focuses the chip/tag, which hides the keyboard.
• When the input is flows over, the label intersects with the chips:
  
• There's no way to change (add, remove, reset) the .chips data programatically from javascript. Maybe expose the private methods? A current workaround is to reset the outerHTML of the .chips element and reinitialize it, since you can't reinitialize a chips element.
• The .prefix and <input> field should maybe still be focused, while selecting a .chip ?
  
• Ultra minor issue: very little offset between regular text fields
  

[joglr]

bump

[fega]

@jonasroessum Bumb?

[joglr]

There are still issues with the chip tags. Just saw an alternative approach at reach-md. They put the chips above the input field which solves a lot of the issues.

[benhickson]

bump - any fixes for this in 1.0.0?