On launching a dialog when a specific combo box item is selected

A customer asked for some help implementing a combo box with a special behavior: When one specific item is selected, it should open a dialog box. They were using a data binding framework and tried to open a dialog when the bound property had a certain value, but it wasn’t working properly. They wanted to know the recommended way of implementing this behavior.

The recommended way to implement this behavior is not to implement this behavior.

Combo box selections should not trigger actions when selected.

One reason not to open a dialog box when a combo box item is selected is that if the default item in the combo box is the special one, then when that combo box initializes, it will set the default item to that special item, and then your app will open that dialog box, even though the user didn’t do anything. They will just go to the page that contains the combo box, and this dialog box will suddenly open.

Now, you can work around this by suppressing the dialog box when the combo box is initializing, so this specific issue could be fixed.

It also means that if the user has already selected the special combo box item, and they want to open the dialog box again, they have to select some other item, then select the special item again.

A more important reason for not opening a dialog box when selection changes is that it breaks keyboard accessibility. The user uses the arrow keys to move through the combo box items, and when they get to the special one, a dialog box opens, even though their goal was not to select that special item; they were merely passing through.

What you can do is provide a separate button that opens the dialog box and show the button only when that special item is selected.

The customer didn’t say what the combo box item or dialog box was for. My guess is that the combo box provided a bunch of premade values, and a special item called Custom. If you select Custom, then they wanted to open a dialog box so you can select your custom value. For that case, an alternate design would be for the page to show a “Change custom value” button when Custom is selected and even show the current custom value next to it.

The post On launching a dialog when a specific combo box item is selected appeared first on The Old New Thing.