[select] Fix alignItemWithTrigger transform with CSS animations

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

When using a CSS animation (instead of a CSS transition), the fix applied in #3637 (and the previous PR) doesn't work. The transform style needs to be unset using !important.

CSS animation: https://stackblitz.com/edit/ujm4hguq
CSS transition: https://stackblitz.com/edit/m8a9qjuj

[pkg-pr-new]

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3831
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3831
  

commit: a5c9414

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	▼-11B(0.00%)	▼-3B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	a5c9414
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6972d8264a330500081a39d7
😎 Deploy Preview	https://deploy-preview-3831--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR fixes an issue where CSS animations (as opposed to CSS transitions) on the select popup's transform property were not being properly overridden during position calculations when alignItemWithTrigger is active.

The key change is adding the 'important' flag to style.setProperty() calls in the unsetTransformStyles function. This ensures transform styles are reliably reset to neutral values (transform: none, scale: 1, translate: 0 0) even when CSS animations are applied, allowing accurate measurements of the popup's position.

Changes:

• Added 'important' parameter to style.setProperty() calls to override CSS animations
• Refactored data structure from object to array of tuples for cleaner iteration
• Simplified restoration logic by inlining the restoreInlineStyleProperty helper function

The existing test at SelectPopup.test.tsx:93-126 validates that inline styles are properly restored after measurements, which should continue to pass with this implementation.

Confidence Score: 4/5

• This PR is safe to merge with low risk - it's a targeted fix for a specific CSS animation issue
• The change is minimal and well-scoped, addressing a specific issue with CSS animations. The !important flag ensures transform styles are overridden during measurements, which is the correct approach for this use case. The refactoring simplifies the code without changing its fundamental behavior. Existing tests validate that inline styles are properly restored.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react/src/select/popup/SelectPopup.tsx	Added !important flag to transform style resets to ensure CSS animations are properly overridden during measurements. Simplified restoration logic slightly.

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[atomiks]

@greptileai

[michaldudak]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}