Improve usability of Selectize fields since 4.4

[bencroker]

As a follow-up to #12608, while the Selectize field brings great improvements to Dropdown and Multi-select fields, some people in Discord have been voicing annoyances about how it works differently than native <select> inputs. I’m sharing some of the comments below, along with some initial thoughts.

These new selects in Craft CP stress me out for some reason. I think it's because I can't click-drag-release like you can with a native select. Are they really worth it?

This actually works in the Selectize demos, so perhaps Craft is doing something different that prevents the ability to click-drag-release?
https://selectize.dev/docs/demos/single-item-select

IMO it can be nice for big datasets, but for 3/4 options in a dropdown it's not nice at all. I think a better solution would've been to have a field option to show it with selectize or keep it default.

I personally don’t see a problem with the field when only a few options are available and believe that consistency in the usability of the field type is more important than customisability, in this instance.

I really don't like that typing in the field doesn't jump to the corresponding option, I first have to press backspace to remove the selected option, then start typing. I'm used to filling forms quickly using keyboard inputs and tab navigation, and this throws me off every time.

There’s a “select on focus” plugin for Selectize that may solve this issue.
https://selectize.dev/docs/plugins/select-on-focus

I'm curious why you all hate it so much!

🤷

[brandonkelly]

These new selects in Craft CP stress me out for some reason. I think it's because I can't click-drag-release like you can with a native select. Are they really worth it?

This actually works in the Selectize demos, so perhaps Craft is doing something different that prevents the ability to click-drag-release? https://selectize.dev/docs/demos/single-item-select

Looks like we were a few versions behind. Updated to Selectize 0.15.2 for Craft 4.5, and that feature now works like the demo 🎉 (b4ad74d)

IMO it can be nice for big datasets, but for 3/4 options in a dropdown it's not nice at all. I think a better solution would've been to have a field option to show it with selectize or keep it default.

I personally don’t see a problem with the field when only a few options are available and believe that consistency in the usability of the field type is more important than customisability, in this instance.

Agree, it would be awkward for some Dropdown fields to use Selectize, and others to use native <select>s – which both look identical and serve the same purpose, but one behaves differently from the other when clicked on.

I really don't like that typing in the field doesn't jump to the corresponding option, I first have to press backspace to remove the selected option, then start typing. I'm used to filling forms quickly using keyboard inputs and tab navigation, and this throws me off every time.

There’s a “select on focus” plugin for Selectize that may solve this issue. https://selectize.dev/docs/plugins/select-on-focus

Oh yeah that’s much nicer. Added for single-selects in Craft 4.5!

Worth mentioning, we’ve also made some minor Selectize styling improvements for 4.5 via #13176 w/r/t #13065.

[bencroker]

That’s great, thanks Brandon!

[brandonkelly]

Craft 4.5.0 is out with those Selectize improvements!