IE: Persistent Placeholder

[lorraineS]

On IE11 if our input has a placeholder, the plugin will convert this placeholder into a string, this will create an unwanted behavior since the placeholder will become a tag.

<input type="search" id="tags" placeholder=« My placeholder »>

  config = {
    join: ', ', 
    max: 5,
    alert: false,
    update: function() {}
  };

  var foo = new TIB(document.querySelector('input[id="tags"]'), config);
  foo.create();

A first idea to fix this is to add values: [''] in the config object. That fixes the problem but that creates a second one: the placeholder remains after a first tag is created.

  config = {
    join: ', ', 
    values: [''], // empty values
    max: 5,
    alert: false,
    update: function() {}
  };

The result on your demo: http://codepen.io/anon/pen/GmvgRp (IE11 or less !)

[taufik-nurrohman]

I’m affraid that I can’t fix this issue by myself due to the limitation of the environment. But currently, the placeholder itself is also just a fake placeholder that is generated by the placeholder attribute on a contenteditable element (tags-input-beautifier.css#L47&L54). Thinking that IE can convert pseudo elements into a valid form value seems impossible for me. I see that you are using something like Google Material framework? Do you have some script that behaves like placeholder polyfill? If so, maybe that’s the cause.

I can produce the second capture from my environment, but only for the first tag:

[lorraineS]

No, i use my own styles. No framework. I will keep you informed if i find a fix.

[taufik-nurrohman]

Tested on IE11.