Ember-power-select: Placeholder not displayed for IE11

[jorkas]

When using the placeholder attribute with the {{power-select-multiple}} it seems to disappears for us and I experienced the same problem at the demo (Select some names...).

See dump from homepage

IE11

Chrome

Placeholder is supported in IE11 and i really hope this is something that might be supported out of the box here as well?

[kaermorchen]

@jorkas If do you need placeholder, you can use this snippet

// components/power-select-multiple/trigger
import Trigger from 'ember-power-select/components/power-select-multiple/trigger';
import computed from 'ember-computed';
import get from 'ember-metal/get';

const ua = window && window.navigator ? window.navigator.userAgent : '';
const isIE = ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

export default Trigger.extend({
  maybePlaceholder: computed('placeholder', 'select.selected.length', function() {
    if (isIE && !isIE11) {
      return null;
    }

    let select = this.get('select');
    return (!select.selected || get(select.selected, 'length') === 0) ? (this.get('placeholder') || '') : '';
  }),
});

But IE11 has the bug, focus will work badly

[Techn1x]

I noticed this today too. No placeholder on IE11 :( Has this bug always been there?

[cibernox]

I just landed from holidays, I'll look into this asap. If I haven't answered by Wednesday afternoon please ping me again.

[Techn1x]

ping @cibernox

[buschtoens]

Bug still present with latest Ember.js and ember-power-select version.

[tinyweasel]

Still happening!

[arnebit]

Placeholder is explicitly removed when the browser is IE11 since PR #355 (see snippet in second post).

The reasoning given was

There is some kind of bug in IE that causes the input to gain the focus over and over when it has placeholder.

This solution is less than ideal, but it's better to not have placeholder than to have a select that you can't close.

and I can reproduce this: The dropdown only closes on click outside when there is already a selection or a search string is entered (single letter is enough), but cannot be closed when the content is empty.

One could easily add a boolean parameter to display the placeholder in IE11 regardless, but informing our users about how to close the dropdown properly seems less than ideal, too.

(I tried to make a related twiddle but it gets stuck building, possibly related to https://github.com/ember-cli/ember-twiddle/issues/561.)

[arnebit]

I now worked around this by wrapping the component in a my-power-select-multiple component that, before the original power-select-multiple and in IE only, renders an additional div containing the placeholder, which is then moved via css to where one would expect the placeholder. This requires a bit of additional effort to hide the placeholder div when the user is typing or a selection is already present.

// my-power-select-multiple.js
import Component from '@ember/component'; 

const ua = window.navigator.userAgent; 
const isInternetExplorer = ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; 

export default Component.extend({ 
  tagName: '', 
  isIE: isInternetExplorer, 
  iePlaceholderClass: 'ie-placeholder', 
  actions: { 
    onfocus(...args) { 
      this.set('isInFocus', true); 
      const originalAction = this.get('onfocus'); 
      return originalAction ? originalAction(...args) : undefined; 
    }, 
    onblur(...args) { 
      this.set('isInFocus', false); 
      const originalAction = this.get('onblur'); 
      return originalAction ? originalAction(...args) : undefined; 
    }, 
  }, 
});

{{!-- my-power-select-multiple.hbs --}}
{{#if (and isIE (not selected) (not isInFocus))}} 
  <div class="{{iePlaceholderClass}}">{{placeholder}}</div> 
{{/if}} 

{{#power-select-multiple 
    options=options 
    selected=selected 
    onchange=onchange 
    placeholder=placeholder 
    class=class 
    searchField=searchField 
    searchEnabled=searchEnabled 
    allowClear=allowClear 
    onfocus=(action 'onfocus') 
    onblur=(action 'onblur') 
  as |option select|}} 
  {{yield option select}} 
{{/power-select-multiple}} 

/* some.css */
.ie-placeholder { 
   height: 0px; 
   transform: translate(10px, 0.4ex); 
   z-index: 1; 
   color: #999; 
} 

It's not a drop-in replacement if you customize your power-select's tagName or pass in other properties than the ones above, but you get the idea. A variant could probably be incorporated into ember-power-select directly, but I just fiddled a bit with the css until it fit my needs and cannot vouch that it can be generalized easily.