The dropdown transition was broken because inline display: none/block styles were interfering with CSS transitions. When an element has display: none, CSS transitions cannot work properly as the element is immediately removed from the layout.

Problem

The BDropdown component was setting inline styles with {display: showRef ? 'block' : 'none'} which prevented smooth CSS transitions from working. This caused dropdown menus to appear and disappear abruptly without any fade or transition effects.

Solution

Added a targeted CSS rule that overrides the inline display style specifically during transition states:

/* Override inline display styles during transitions to allow proper CSS transitions */
.dropdown-menu.fade.showing {
  display: block !important;
}

This rule only applies when the dropdown menu has both fade and showing classes, which are present during CSS transitions. This allows the transition animations to work properly while maintaining the correct display behavior in non-transition states.

Testing

• All existing tests pass (1597 tests)
• Manual testing confirmed smooth transitions for both regular and split dropdowns
• Build and linting processes pass without issues
• No regressions in dropdown functionality

The fix is minimal, targeted, and preserves all existing functionality while restoring smooth transitions.

Screenshots

Before fix - dropdowns work but without smooth transitions:

After fix - smooth transitions restored:

Fixes #2811.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.