[Feat] Enable new dcc components from dash==4.0.0rc6

[petar-qb]

closes https://github.com/McK-Internal/vizro-internal/issues/2295
closes https://github.com/McK-Internal/vizro-internal/issues/2200
closes https://github.com/McK-Internal/vizro-internal/issues/2214
closes https://github.com/McK-Internal/vizro-internal/issues/2351

Description

This PR adds relevant backend and UI support for all dcc components used inside Vizro for dash==4.0.0rc2.

Key Improvements

Dropdown Component

• Removed custom select_all implementation: Dash v4 now provides native "Select All"/"Clear All" functionality, eliminating our custom JavaScript implementation
• Simplified options height handling: Previously, we manually calculated dropdown options' height on every build. Now, Dash v4 handles this automatically based on CSS max-width
• Improved maintainability: The simpler implementation makes vm.Dropdown easier to inherit from and extend

Slider and RangeSlider Components

• Removed custom input fields: Dash v4 now natively supports editable input fields for sliders, so we've removed our custom implementation and related JavaScript code
• Deleted obsolete tests: Removed unit tests for the now-unnecessary custom input field logic

Styling Updates

• Mapped Bootstrap CSS variables to Dash CSS variables for consistent theming
• Added new custom CSS for Dropdown, Slider, and RangeSlider components
• Removed legacy styling logic

Known Issues

@petar-qb
The only "creepy" thing that stays the same is the weird placeholder for dynamic dropdowns that can’t be replaced with standard one (just by calling the __call__ like other models). (find the reason and the dash PR link in the code comments).

I found a few more minor inconsistencies and posted it in the comment for the dash issue.

Screenshot

Run hatch run example themes

TODO:

• Update to dash==4.0.0rc3
• Add first UI changes
• Double-check UI changes after updating to 4.0.0rc3
• (re)write unit tests
• See here what else should be done to fully support dash v4
• (re)write e2e tests
• @petar-qb Update https://github.com/mckinsey/vizro/wiki/Developer-docs#page-loading

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2026-01-20 12:45:48 UTC
Commit: 9fe737d

Compare the examples using the commit's wheel file vs the latest released version:

vizro-core/examples/scratch_dev

View with commit's wheel vs View with latest release

vizro-core/examples/dev/

View with commit's wheel vs View with latest release

vizro-core/examples/visual-vocabulary/

View with commit's wheel vs View with latest release

vizro-core/examples/tutorial/

View with commit's wheel vs View with latest release

[huong-li-nguyen]

Some visual change requests for Dash tracked here:

• [Feature Request] Feedback on the dcc.Dropdown from dash==4.0.0rc2 plotly/dash#3510 (comment)
• [Feature Request] Allow styling of in-range vs. out-of-range marks / numbers inside dcc.Slider / RangeSlider using dash==4.0.0rc1 plotly/dash#3512

It might already be possible, but eventually I just didn't know how. Anyway, I am waiting for their response :)

[petar-qb]

TODO: @petar-qb - Update to the new rc5, clean the code, check if anything is broken.

[petar-qb]

Hey @huong-li-nguyen @nadijagraca 👋
I’ve updated to the latest dash==4.0.0rc6, and it looks like the UI is broken again 😕

You can see the issues by running hatch run example and hatch run example themes. The dropdown UI problems that this PR fixes with CSS seem to have started in dash==4.0.0rc5 again.

[huong-li-nguyen]

Hey @huong-li-nguyen @nadijagraca 👋 I’ve updated to the latest dash==4.0.0rc6, and it looks like the UI is broken again 😕

You can see the issues by running hatch run example and hatch run example themes. The dropdown UI problems that this PR fixes with CSS seem to have started in dash==4.0.0rc5 again.

Fixed for now :)