[Feature Request] Feedback on the `dcc.Dropdown` from `dash==4.0.0rc2`

[petar-qb]

Hi Dash team 👋

The new components implementations introduced in dash==4.0.0rc2 are fantastic and we in Vizro are excited to adopt them as soon as they’re officially released in dash==4.0.0.

I’m reposting my earlier comment here for better visibility, since the original ticket is now closed. Also, following @AnnMarieW's suggestion on the Plotly forum, I’m moving the discussion here.

I noticed a couple of small inconsistencies in the updated Dropdown that might be worth checking out:

1. I agree with Ghaarsma’s point about the new reordering of selected options for Dropdown(multi=True). It would be great if this new ordering behaviour were configurable, either opt-in or opt-out. Both approaches would work for us.
2. When using Dropdown(multi=True), the "search" field automatically receives focus, but this doesn’t happen with the Dropdown(multi=False). Not sure if this is intentional, although it feels a bit inconsistent.
3. Pressing Enter key while an option is focused doesn’t toggle selection, so selecting or deselecting via keyboard isn’t possible.

[KoolADE85]

Hey @petar-qb thanks for the feedback on the new component designs!

1. Just for some context - we've been trying to address the poor behaviour of the current multi-dropdown where it changes size and fits quite awkwardly within the page. But we still need a way for users to easily see & modify their selections "at a glance". Hence the idea around hoisting the selection to the top. I'll run your feedback past the design team and see if we can find a consensus around an option that disables that behaviour while still achieving the other goals.
2. 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.
3. I'll fix this. "Spacebar" selects/deselects but I neglected the Enter key!

[AnnMarieW]

I wanted to mention some odd behavior of the Dropdown options menu. This may be a bit of an edge case, so I'm not sure if it's a priority.

If you have a short viewport, the dropdown options can disappear behind the browser toolbar when the component is near the bottom of the viewport. In the image, the viewport takes up about a third of my screen. You can scroll to the bottom of the options list, but you can't get to the first few to select them.

from dash import Dash, html, dcc

app = Dash()

app.layout = html.Div(
    dcc.Dropdown([f"Option {i}" for i in range(100)], multi=True, maxHeight=600),
    style={"marginTop":400}
)

if __name__ == "__main__":
    app.run(debug=True)