[4.4]: UX issues with 'selectize' dropdown fields

[wsydney76]

What happened?

Description

While we get the benefits of using selectize for long value lists, it causes serious UX problems for standard use cases, mostly around handling 'empty' values.

A) Option with empty value

Configured with one option with an empty value :

The dropdown does not show this value:

The 'None' option gets only visible when focusing the input field and hit the 'backspace' key, which is terrible UX.

B) No option with empty value

Typing random text into the input field and saving causes the field to have an empty value. With a standard select HTML field this would not be possible and therefore these fields are usually not marked as 'required'. Now they have to in order to avoid invalid data. To be severe for once, I would consider this to be a breaking change, as it forces everybody to check/update all field usages.

Steps to reproduce

See above.

Expected behavior

Like in good old times.

No idea how selectize can be customized to fix these issues, however, I would prefer a field setting whether to use selectize or not.

Actual behavior

See above.

/Mel

Craft CMS version

4.4.1

PHP version

8.1.13

Operating system and version

Linux 5.15.90.1-microsoft-standard-WSL2

Database type and version

MySQL 10.4.27

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions

[brandonkelly]

Both of those issues are fixed now, for the next release!

Typing random text into the input field and saving causes the field to have an empty value.

I couldn’t find a way to configure Selectize to prevent this, so instead I addressed this on the validation end. Dropdown fields that are saved within the control panel no longer allow blank values, unless one of the options has a blank value as well.

[brandonkelly]

4.4.2 is out with those changes.