Is it a good user experience to prevent user from deselecting an item from a dropdown if it is required in a form?

Question

Before I ask my question, I feel like I need to provide some context.

The application that I'm working with has a form for executing queries. This form has the following components:

1. inputs and textareas - native html elements that use the native constraint form validation api that the browser provides.

2. Single and multi select dropdowns - These are custom select components and do not use the native select html tag that browser provides and need their own form validation mechanism.

Each field in the form is either required or optional(The number of fields that are required or optional depends on how the query was created in the server. There could be more optional fields than required and vice versa).

On top of that, each select dropdown can very well have a default option(s) that is/are selected when the form is rendered i.e option(s) that is/are programmatically chosen.

Single Select Dropdown:

• if it is not required, there should be a blank/empty item added to the list. (This is not sent when a query is executed).

• if there is a defaultValue, select it; otherwise, select the first item in the list (either 'blank' if not required or 1st choice - so that we satisfy the required constraint)

Multi Select Dropdown:

• if a parameter is required and there is no defaultValue, select all items in the list (default to "select all").

• if a parameter is not required and there is no defaultValue, unselect/clear all items (default to "select none").

With all of that context, I'll now get into my main question.

For dropdowns that are required, is it to intrusive or restrictive to prevent the user from having no options selected to stop them from accidentally submitting a query that would 100% fail? I would still allow the user to deselect options from the dropdown assuming deselecting that option still leaves you with at least one option selected.

Of course, if they try to deselect from a dropdown with only one option selected, a popup message, hint etc would render and inform the user that this field cannot be left empty and would suggest them to replace this option with another one.

Obviously for dropdowns that are not required they can leave it empty or add/deselect however many options they want.

What do you guys think about this? Would this be a good validation mechanism to add to my dropdown components when they are required(both single and multi-select)?

Answer 1

I think the answer should probably be based on the overall validation behaviour of the entire form, and not just be based on the dropdown UI element.

So if you allow mandatory input fields to be empty (with appropriate validation message) and also allow input to be provided and then cleared, these rules should ideally be applied to the dorpdown input as well.

On the other hand, if you don't allow them to be empty and must have an input in there (whether it is a default value or user selected), then you should be consistent so that there isn't any confusion for the user.

Answer 2

If you disallow deselecting the last item, you impose a ordering restriction on the user when they want to change the selection: They need to select the new option first, and then deselect the old. Depending on the length of the list, this might entail scrolling to find the new option and then scrolling again to find the old one (again). This restriction also only exists if they have precisely one selection when they start.

I think it’s almost certainly better to allow emptying the selection as an intermediate state. You can inform the user that at least one option needs to be selected

• when they hit send (and prevent sending in that case)
• when they start editing some other field
• immediately while they’re editing the selection if you can do it in a way that doesn’t take them out of the process (so a pop-up would be too much, a small informational text below or next to the form element might be fine)