Enhancement: Allow empty Option

[Neunerlei]

Hello there,

I'm currently trying to implement your autocomplete as a replacement for "select2" in my project. While the main focus of your library obviously lies on the "autocompletes", I figured using the "showAllControl" option, the usage as a "select-box" with build-in search would work as well. And generally speaking it does.

One Problem I have noticed is however, that there is an issue when you hydrate a select element which contains an "empty" option, like this:

<label for="select-cf222fe5b2">
    Filter by degree
</label>
<select id="select-cf222fe5b2" data-ref="select">
   <option value="">All degrees</option>
   <option value="16_30">Bachelor</option>
   <option value="17_31">Master</option>
</select>

With a js like this:

AriaAutoComplete(select, {
    noResultsText: this.noResultsText,
    multiple: this.multiple,
    showAllControl: true,
    srDeleteText: this.$t('c.select.js.srDeleteText'),
    srShowAllText: this.$t('c.select.js.srShowAllText'),
    srSelectedText: this.$t('c.select.js.srSelectedText'),
    srListLabelText: this.$t('c.select.js.srListLabelText'),
    srAssistiveText: this.$t('c.select.js.srAssistiveText'),
    srResultsText: length => this.$t('c.select.js.srResultsText', {count: length}),
    onFocus: () => {
        this.$proxy.setTimeout(() => {
            if (this.instance) {
                this.instance.filter('');
                this.instance.open();
            }
        }, 100);
    }
});

Only shows "Bachelor" and "Master" in the Dropdown. I had a brief look at the code and I see, that you deliberately remove the empty option here.

For now, I resolved the issue by setting the value of the empty option to NULL, because I only use the result in JS. For the usage in a PHP form I think it would make sense to allow option elements with an empty value via the options.

Have a great day and stay safe.

[mynamesleon]

Hi @Neunerlei. Sorry for my delayed reply. I've been busy with other work and haven't been checking my personal GitHub as frequently as I should.

Yes, the empty option is deliberately ignored, because the convention would generally be that empty is an invalid selection, such as with a normal input. And in <select> options, it would usually be used for something like a "please select" option. E.g.

<select>
   <option value="">Please select</option>
   <option value="all">All degrees</option>
   <option value="16_30">Bachelor</option>
   <option value="17_31">Master</option>
</select>

Therefore, to return to the empty state, the user would simply clear the selected value(s), just like with a normal input field.

I worry that such an option, if used, could create a misleading user experience - the whole purpose of this library is UX and accessibility after all. I agree though. It could be useful to add an option to indicate what should be treated as an empty value, in case people use an empty string value in a non-standard way.