Prompt obscures selected options in Multiple selection with autocomplete

[gosko]

When using Multiple selection with autocomplete inputs, the potential autocomplete values are sometimes displayed on top of any existing selections, resulting in a poor user experience.

For example on the mailing list search page in the 'Specific lists to search' field, if you enter some text like 'valid' then select one of the options (like 'www-validator'), the list of options disappears and is replaced by the 'Please enter 2 or more characters' prompt. The 'www-validator' selected option is there, but hidden by the prompt.

This form uses the following markup:

<div class="field">
<label for="lists"><span class="field-label">Specific lists to search</span></label>
<select id="lists" name="lists" class="multiselect" multiple data-search-start="off" data-source="https://lists.w3.org/Archives/Public/mase-lists">
<option></option>
</select>
</div>

This issue is also present on the Add event page (restricted to Chairs and Staff) which uses the following markup for its selects:

             <div class="field">                
    <label for="event_groups">
    <span  class="field-label">Groups</span>
            </label>
    <span id="hint-event_groups" class="field-hint">This event will be added to each group participant's calendar.<br/>Chairs of participating groups can update this event.</span>    

    <select id="event_groups" name="event[groups][]" aria-describedby="hint-event_groups" data-type="ajax" data-source="/_api/search/groups/?page_limit=100" data-ajax--cache="true" data-ajax--cache-timeout="60000" data-ajax--delay="250" data-ajax--data-type="json" data-language="en" data-theme="default" data-minimum-input-length="1" data-placeholder="Search groups" data-page-limit="100" data-scroll="true" data-autostart="true" class="multiselect " data-name="groups" multiple="multiple" data-allow-clear="true" data-width="100%"><option value=""></option></select>    </div>

This does not seem to be an issue on the Country/region input on the Current Members & Testimonials page, nor on the demo page on the design system site (neither of those pages displays a 'Please enter 2 or more characters' prompt)

It would be good to update the CSS so the 'Please enter 2 or more characters' prompt does not obscure any selected options underneath, and update the design system docs to document how to suppress that text, since that seems possible.

(I didn't dig into this very much, so maybe I'm missing something obvious!)

[deniak]

@NicolaSaunders no need to look into that yet. We want to test a new JS script to handle the multi selection first and see if it can solve the issue.