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. 😄

[radwo]

Hey! Thanks for the great work on Administrate so far!
Now that we have 1.0 versions, what's the plan here to bring selectize up to date?

[goosys]

I’m thinking that, in the future, it might be nice to make this a plugin so users can choose whether they want to use Selectize or not—there are probably other good libraries out there too.

But I don’t think we can go that far right now, so for the moment I think it’s best to just stay up to date with the latest Selectize.

What do you think? @nickcharlton @pablobm

[nickcharlton]

I think we should try and get this in as soon as we can. @goosys, could you rebase and update the branch to resolve the conflicts?

I’m thinking that, in the future, it might be nice to make this a plugin so users can choose whether they want to use Selectize or not—there are probably other good libraries out there too.

Yeah, I've thought the same. I'd quite like to replace it with something that's primarily web components based. Even if we wrote our own for it.

[goosys]

@nickcharlton Rebased!

See:
http://localhost:3000.app.github.dev/admin/customers/1/edit

[nickcharlton]

Thanks!

I can't access that link because it's invalid, but I'll spin up a review app and test it out.

[radwo]

Thanks!

[radwo]

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.

This change brake the ability to type and filter the select list when include_blank is set to false.

[nickcharlton]

@radwo, if that's a new problem since this, can you open a new issue and mention this one?