[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)

[huong-li-nguyen]

[Visual Feedback / CSS requests]

Hello @KoolADE85 ,

I tested the new Dropdown as well and overall agree with @AnnMarieW and @petar-qb - it works really nicely! Thanks a lot for the work that went into this 🚀 While I tried to recreate the styling we previously used on the old dcc.Dropdown, I ran into a few things that seem harder to achieve with the new component:

What I'd ideally love to have:

• More control over label styling (e.g., removing commas).
  In this PyCafe example, you can see the style I was going for with the option labels — basically removing the commas and adding a background color. I can achieve it with custom CSS (though a bit hacked), but if others like this look, it could be useful to have a built-in option to disable the commas and style the labels.

• Move the “X selected” text inside the dropdown menu.
  Our dropdowns usually don't span the full width, so the “X selected” text often overlaps the actual label content. From a design point of view, I'd prefer if the “X selected” indicator lived inside the menu instead (so remove from the dropdown field and move to menu), ideally next to “Select All / Deselect All” on the right. It could also be shortened (e.g. “3/5”) just to give a quick sense of how many options are selected.

• Ability to style the checkboxes inside the dropdown.
  I wasn’t able to fully style the internal checkboxes—even with custom CSS (example also in PyCafe). Some properties didn’t seem to apply. It would be great to have a way to style these so they match the rest of the checkboxes in our app (we use dbc). In general, I wanted to style the borders, change the background-color, change the border-radius and eventually change the check mark.

I also have a few visual/CSS questions about the slider and range slider components, but I'll open a separate issue for those!

[KoolADE85]

@AnnMarieW - thanks for reporting this bug. I have a solution that I'll include in the next release.

@huong-li-nguyen - thanks for the feedback!

1. Excellent point re: the hard-coded commas in the list. I will update this so that the commas are added with CSS, which will allow them to be overridden/removed.
2. This is a key UX change that I expect we'll preserve. The idea is that there will always be cases where users select more than can be displayed (since the size of the input no longer changes as you use the component). By showing "X selected", users can still see "at a glance" some info about their choices without interacting with the component. However, you can override this with display: none on the .dash-dropdown-value-count element.
3. The checkboxes are now native browser input[type="checkbox"], so you can use the standard CSS methods of styling these. Admittedly, styling browser checkboxes is still a bit clunky. One idea I have to simplify this, is to wrap the input in a div, and you can apply styles to the div rather than the input element directly. I'll see about including this in the next rc.

[huong-li-nguyen]

Hi @KoolADE85,

1. Perfect, thank you! That' ll definitely simplify the logic on my side.
2. Got it - I originally thought about moving it inside the menu, but completely understand why you want to keep it.
3. That would be amazing! I tried every possible CSS trick, but overriding the native checkboxes was nearly impossible. Happy to test it once it's in the next RC.

Thanks again! 🚀

[ndrezn]

@KoolADE85 can this issue be closed?

[KoolADE85]

Yep! This feedback will be included in the next rc3.