Harvest Chosen fallback mobile usability

gistfile1.txt

Know how https://harvesthq.github.io/chosen/ falls back to a normal <select> in unsupported browsers? The following is a workaround for still allowing use of the `data-placeholder` property when initiated, but a sane fallback when not.

HTML output:

<div class="ChosenSelect">
  <select required data-placeholder="Choose a fruit">
    <option value="">Choose a fruit</option>
    <option value="Apples">Apples</option>
    <option value="Mangos">Mangos</option>
    <option value="Pears">Pears</option>
    <option value="Plums">Plums</option>
    <option value="Nectarine">Nectarine</option>
  </select>
</div>
  
JS init:

$('.ChosenSelect select')
// Must run before Chosen is initiated
.on('chosen:ready', function(e, opts) {
  // Check if first value is blank option
  if (!e.target[0].value) {
    // Update option to appease `data-placeholder` requirement
    e.target[0].innerHTML = '';
    // Trigger update method
    $(this).trigger('chosen:updated');
  }
})
.chosen();