fix(SplitButton): prevent menu position shift on close

[YehudaMenahem]

User description

Label

bug fix

---

User description

Description
Fixes a visual glitch in SplitButton where the menu briefly shifts position when closing.

Root cause
While the menu is open / closing, the SplitButton wrapper applies a press-scale animation (transform: scale(0.95)), which temporarily changes the reference element’s size. This causes the menu position to be recalculated and results in a short top-left jump before unmount.

Solution
Disable the press-scale animation on the SplitButton wrapper while the menu is open. This keeps the reference size stable during close and prevents the position glitch.

Tradeoff
The press animation is skipped only during menu close. This avoids layout instability with a minimal, CSS-only change and no JS or lifecycle intervention.

Alternative (not implemented)
A JS-based solution could lock the menu position during close or delay recalculation, but would add complexity and runtime cost compared to the current approach.

• I have read the Contribution Guide for this project.

Resolves #3129

---

PR Type

Bug fix

---

Description

• Prevents menu position shift when closing SplitButton

• Disables press-scale animation while menu is open

• Maintains stable reference element size during close

---

Diagram Walkthrough

flowchart LR
  A["SplitButton menu open"] -- "disable press-scale" --> B["Stable reference size"]
  B -- "on close" --> C["No position recalculation"]
  C -- "result" --> D["No visual glitch"]

Loading

File Walkthrough

	Relevant files
Bug fix	SplitButton.module.scss Add CSS rule to disable press-scale during menu open          packages/core/src/components/SplitButton/SplitButton.module.scss Added new CSS rule .active.splitContentOpen to override press-scale animation Sets transform: none when split menu is open to prevent layout shift Added explanatory comment documenting the fix rationale +6/-0

---

---

PR Type

Bug fix

---

Description

• Moves press-scale animation from wrapper to individual buttons

• Prevents menu position shift when closing SplitButton

• Maintains stable reference element size during menu close

• Adds transform-origin for proper button scaling

---

Diagram Walkthrough

flowchart LR
  A["Press animation on wrapper"] -- "refactored to" --> B["Press animation on buttons"]
  B -- "result" --> C["Stable wrapper size"]
  C -- "prevents" --> D["Menu position glitch"]

Loading

File Walkthrough

Relevant files

Bug fix

SplitButton.module.scss Refactor press animation to individual buttons                      packages/core/src/components/SplitButton/SplitButton.module.scss Removed transform transition from .button wrapper selector Added individual transform transitions to .mainButton and .secondaryButton Added transform-origin properties (right center, left center) for proper scaling Changed .active selector to target individual buttons instead of wrapper +7/-3

---

[qodo-free-for-open-source-projects]

PR Reviewer Guide 🔍

(Review updated until commit 42b8188)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 3129 - PR Code Verified Compliant requirements: Fix the menu position shift/glitch when closing the SplitButton menu by clicking the arrow The menu should remain in the same place until it closes (no movement to top-left) Requires further human verification: Visual verification that the menu no longer shifts position when closing Browser testing to confirm the fix works across different scenarios Verification that the press animation still works correctly when menu is closed

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing CSS Rule The PR description mentions disabling press-scale animation while menu is open using a .active.splitContentOpen selector, but the actual code changes only modify the .active selector to target .mainButton and .secondaryButton separately. There's no .splitContentOpen class or logic to conditionally disable the scale transform when the menu is open. .active .mainButton, .active .secondaryButton { transform: scale(0.95); } Incomplete Solution The changes add transitions and transform-origin properties but don't actually implement the stated solution of disabling press-scale during menu open state. The scale transform is still applied to .active state regardless of whether the menu is open or closing. transition: var(--motion-productive-medium) var(--motion-timing-transition) min-width; } .button .mainButton { margin-right: 0; transition: var(--motion-productive-short) transform; transform-origin: right center; } .button .secondaryButton { margin-left: 0; transition: var(--motion-productive-short) transform; transform-origin: left center; } .secondaryButtonWrapper .secondaryButtonIconWrapper { display: inline-flex; padding: 0 4px; } .active .mainButton, .active .secondaryButton { transform: scale(0.95); }

[YehudaMenahem]

Quick update after further investigation 👋

I replaced the previous :has()-based approach with a solution that relies on the existing splitContentOpen class,
which is already applied by the component logic when the menu is open.
This avoids the need for :has() entirely and ensures full Firefox support,
while keeping the change minimal and scoped to styling only.

[YehudaMenahem]

Follow-up improvement:
Found a way to fully resolve the glitch without disabling the press animation.

The fix moves the press-scale from the SplitButton wrapper to the inner buttons, keeping the exact same visual feedback while preventing any layout / bounding-box changes that affect menu positioning.