Inconsistent Dropdown focus behaviour in 4.0?

We’ve been testing the 4.0 release and while it’s largely been seamless, we’ve hit a problem with the behaviour of the new dcc.Dropdown.

We use dropdowns in both single-select and multi-select mode for filtering datasets, for example by picking an employee from a long list of employees. Under the old Dropdown, a user could focus on a dropdown and just start typing to search for a match then press enter when found, regardless of mode or state.

Under the new Dropdown this behaviour continues for multi-select regardless of state, but for single-select it only applies if no existing option is selected. If there’s already an option selected then focusing the dropdown activates the list and selects the selected option and not the search box. All a user can do from there is arrow/tab up or down to navigate to nearby entries. If you want to search you can’t activate it by keyboard, you have to first mouse to the search box and click into the search box and then start typing. Repeat that for changing 3 or 4 filter options and it gets quite tedious.

I found issue [Feature Request] Feedback on the `dcc.Dropdown` from `dash==4.0.0rc2` · Issue #3510 · plotly/dash · GitHub where the devs say this is deliberate:

“This is indeed intentional: multi=False brings focus to the selected option so users can navigate by keyboard directly from that part of the list. It focuses the search if nothing is selected.”

I can’t understand why this would be useful other than selecting very nearby entries in a short list which seems a minority use case to me perhaps better covered by turning search off entirely. It’s also inconsistent with both previous behaviour and the current behaviour for all the other modes and states and will confuse and frustrate users. It should be consistent in all modes and states. At the very least if I start typing characters with the dropdown selected then the search should then be activated.

How do others feel about this change? Am I missing something? Or is it our use case that is niche and unusual?

Hi @jlayt

Thanks for starting the discussion!

Do you think this PR will solve the issue? Make focused dropdowns searchable without first opening by KoolADE85 · Pull Request #3627 · plotly/dash · GitHub

This PR updates dropdowns to be searchable without first opening:

  • When focused, you can now start typing and the dropdown will automatically open with the search field focused.
  • Pressing enter while searching will select/deselect the first available option.

Here is another open PR by @Emil that’s still marked as draft: Add tab workflow by emilhe · Pull Request #3573 · plotly/dash · GitHub

The following drop down behaviors change been changed to align more closely with the Dash 3 behaviors (attempting to solve #3572),

  • Add auto-open-and-search on typing
  • Highlight top match on search
  • Select highlighted value and close on TAB and ENTER
  • Improve the search ranking (e.g. if you type ‘s’ with values [‘accessories’, ‘shorts’], the top match will now be ‘shorts’ instead of ‘accessories’)

I also have a PR that fixed one bug but changed how the search and focus work in the multi- select. The new behavior is that once you select an item, the focus automatically goes back to the search field. Would you consider this a feature or a bug? Currently the focus stays on the selected item. fix multiselect dropdown with components as labels by AnnMarieW · Pull Request #3643 · plotly/dash · GitHub

1 Like

Hi Ann Marie,

Thanks, that is the behaviour we are after. In single-select once a user starts typing it should activate the search and highlight the top match to choose on enter, while also showing all other matches that can be selected by up/down arrow. For multi-select, once the first item is chosen then the user should be able to start typing to select a second item. With your change I can see an issue in the scenario where there are multiple matches and you wish to select multiple of them, by returning focus to the search box do you prevent that, or will up/down still navigate the result list?

Many thanks!

John.

Hi John,

Glad PR 3627 will solve the issue for the single select. It should be available in the next release.

In PR 3643 to fix the bug in multi-select, you can still get back to the options list with the up/down keys, but I see now it’s not ideal to return the focus to the search.

Thanks for your feedback!