Use placeholder attribute on input elements for placeholder text (instead of value attribute)

[jenlampton]

Chosen puts the Placeholder text into the value attribute on the input elements, instead of in the placeholder attribute. It still renders as though it was a placeholder.

I'm using the localize.js service for translation on several websites. This service specifically searches for placeholder attributes and translates those, so that all visible text on the page can be translated. The localize script is not able to recognize the placeholder text, because it's not in the placeholder attribute, so these values are not properly translated.

Is there some reason the placeholder attribute was not used for its intended purpose? Does the placeholder attribute not work as expected?

I would like to propose that Chosen switch back to using attributes as they were intended to avoid this problem, and similar conflicts with other projects or systems that are expecting standard markup.

[juanolalla]

While this is fixed in Chosen, here is an external solution I developed for my project:

      // Set placeholder instead of value for chosen select data-placeholder.
      // @see https://github.com/harvesthq/chosen/issues/3133
      $('select').on('chosen:ready', function (e) {
        var placeholder = $(e.target).attr('data-placeholder');
        if (placeholder) {
          var input = $(e.target).next('.chosen-container').find('.chosen-search-input');
          input.attr('placeholder', placeholder);
          input.val('');
          input.removeAttr('value');
        }
      });