Add allow empty option for @selectize/selectize

[goosys]

Updating @selectize/selectize (v0.12 -> 0.15) and revisiting #2790

• Resolves Selectize removes the blank options from selects #2545
• Closes Add allow empty option #2790

Updating Selectize improved the visibility of empty options without requiring custom CSS. However, due to compatibility issues between Selectize, Rails, and Stimulus/Turbo, this ended up being a larger change than expected.

Preventing form hangs after updating Selectize

Right after upgrading to @selectize/selectize, forms started hanging. To address this, I applied a workaround in the second commit:
hotwired/stimulus#104 (comment)

This issue is likely not limited to Selectize. It seems that every time we use a JS library, we’ll need to implement a teardown() function to avoid similar problems.

Switching from disconnect() to teardown() also prevents a regression of #2811.

Reintroducing allowEmptyOption

Adding allowEmptyOption again worked perfectly as expected.

I also tested the new showEmptyOptionInDropdown option, but it didn’t quite fit our use case, so I decided not to use it.

Preventing unintended removal when include_blank: false

I encountered an issue where pressing Backspace would remove the selection, even when include_blank: false was set.

Since Selectize doesn’t provide a built-in option for this, I added a (somewhat quirky) workaround in select_controller to prevent unintended deletions.

Additionally, since Selectize doesn’t properly recognize the required attribute on select_tag, I had to manually add the constraint via data attributes.

Workaround for placeholder rendering issue

After resolving most of the issues, I ran into one last problem:

When updating a form with include_blank and navigating back via Turbo, the placeholder would display only its first character. A full page reload would render it correctly.
selectize/selectize.js#1498

I couldn't find a proper fix for this, so we’ll have to wait for an update from Selectize.

As a workaround, I set the placeholder to --- instead of a meaningful string. This way, even if only one character is displayed, it won’t look out of place. 😄