Fixing focused entity reference for working with Selectize widgets

Working:

1 Object { command: “updateOptionsCommand”, method: “html”, elementId: “edit-field-findit-areas-of-focus”, … } command “updateOptionsCommand” method “html” elementId “edit-field-findit-areas-of-focus” options [ {…} ] 0 key 90 value “STEAM (Science, Technology, Engineering, Arts, Math)” formatter “select” multiple true

Not working:

1 Object { command: “updateOptionsCommand”, method: “html”, elementId: “edit-field-findit-areas-of-focus”, … } command “updateOptionsCommand” method “html” elementId “edit-field-findit-areas-of-focus” options [ {…} ] 0 key 253 value “Pools & Waterplays” formatter “selectize” multiple true

Error:

Uncaught TypeError: element is undefined updateOptionsCommand update-options-command.js:103 success ajax.js:446 success ajax.js:444 success ajax.js:241 jQuery 9 eventResponse ajax.js:336 Ajax ajax.js:279 jQuery 8 Ajax ajax.js:272 ajax ajax.js:127 loadAjaxBehavior ajax.js:35 jQuery 2 loadAjaxBehavior ajax.js:32 attach ajax.js:40 attach ajax.js:39 attachBehaviors drupal.js:27 attachBehaviors drupal.js:24 drupal.init.js:29 listener drupal.init.js:17 domReady drupal.init.js:24 drupal.init.js:28 drupal.init.js:31 update-options-command.js:103:5 updateOptionsCommand update-options-command.js:103 success ajax.js:446 forEach self-hosted:206 success ajax.js:444 success ajax.js:241 jQuery 9 eventResponse ajax.js:336 Ajax ajax.js:279 jQuery 8 Ajax ajax.js:272 ajax ajax.js:127 loadAjaxBehavior ajax.js:35 jQuery 2 loadAjaxBehavior ajax.js:32 attach ajax.js:40 forEach self-hosted:206 attach ajax.js:39 attachBehaviors drupal.js:27 forEach self-hosted:206 attachBehaviors drupal.js:24 drupal.init.js:29 listener drupal.init.js:17 (Async: EventListener.handleEvent) domReady drupal.init.js:24 drupal.init.js:28 drupal.init.js:31

Fixed that simply by running our update-options-command.js script whether the formatter is selectize or select.

And the select element is still there, hidden, and gets updated correctly— we checkmarked “Summer Camp” and it got added to the page source:

<select data-drupal-selector="edit-field-findit-areas-of-focus" multiple="multiple" name="field_findit_areas_of_focus[]" id="edit-field-findit-areas-of-focus" class="form-select form-element form-element--type-select-multiple selectized" tabindex="-1" style="display: none;">
  <option value="63">Media Arts &amp; Production</option>
  <option value="90">STEAM (Science, Technology, Engineering, Arts, Math)</option>
  <option value="116">Summer Camps</option>
</select>

but it seems we need to get selectize to re-trigger, to look again, to pick it up.

Selectize does write back to this hidden display, but doesn’t treat it as always the source of truth, so that our addition actually gets obliterated when using the visible selectize to select options, the option we added gets dropped as the selectize ones (the only ones visible from the selectize widget) are selected:

<select data-drupal-selector="edit-field-findit-areas-of-focus" multiple="multiple" name="field_findit_areas_of_focus[]" id="edit-field-findit-areas-of-focus" class="form-select form-element form-element--type-select-multiple selectized" tabindex="-1" style="display: none;">
  <option value="79" selected="selected">Financial Assistance</option>
  <option value="57" selected="selected">Career Support</option></select>

This does not have selectized object capabilities (no refreshOptions() method for example):

var slz = $(’#edit-field-findit-areas-of-focus-selectized’);

Neither can we get it with $(’#selectized’) or similar as i see in some examples.

For example this fails for me, there’s nothing in selectized at all:

var selectize = $('#selectized')[0].selectize;
selectize.refreshOptions();

Not in Drupal.behaviors.selectize either.

I’m losing my mind.

Oh good grief i just have to follow the full instructions here:

https://github.com/selectize/selectize.js/blob/master/docs/api.md

So let’s do it:

var $slctz = $('#edit-field-findit-areas-of-focus-selectized').selectize();
var selectize = $slctz[0].selectize;