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

Activity

1. KoolADE85 commented on Nov 13, 2025

   

   KoolADE85

   on Nov 13, 2025

   Last edited by KoolADE85

   Contributor

   More actions

   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!

   👍React with 👍1Reacted by Petar Pejovic

   ❤️React with ❤️1Reacted by Ann Marie Ward
2. AnnMarieW commented on Nov 13, 2025

   

   AnnMarieW

   on Nov 13, 2025

   Collaborator

   More actions

   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)

   👍React with 👍1Reacted by Petar Pejovic
3. huong-li-nguyen commented on Nov 17, 2025

   

   huong-li-nguyen

   on Nov 17, 2025

   Last edited by huong-li-nguyen

   More actions

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

   👍React with 👍2Reacted by Petar Pejovic and Antony Milne
4. KoolADE85 commented on Nov 17, 2025

   

   KoolADE85

   on Nov 17, 2025

   Contributor

   More actions

   @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.

   👍React with 👍1Reacted by Petar Pejovic
5. huong-li-nguyen commented on Nov 18, 2025

   

   huong-li-nguyen

   on Nov 18, 2025

   More actions

   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! 🚀
6. robertclaus

   assigned

   KoolADE85

   on Nov 20, 2025
7. ndrezn commented on Nov 24, 2025

   

   ndrezn

   on Nov 24, 2025

   Contributor

   More actions

   @KoolADE85 can this issue be closed?
8. KoolADE85 commented on Nov 24, 2025

   

   KoolADE85

   on Nov 24, 2025

   Contributor

   More actions

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

   🎉React with 🎉1Reacted by Li Nguyen

   🚀React with 🚀1Reacted by Petar Pejovic
9. KoolADE85

   closed this as completedon Nov 24, 2025