(fix/modal) #6076
Open
(fix/modal) #6076
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 3 commits
January 1, 2026 22:28
- Removed scale transforms from modal animation to prevent input rendering glitches in certain browsers - Ensured modal portal uses document.body for consistent rendering across environments Closes heroui-inc#5976
- Removed scale transforms from modal animation to prevent input rendering glitches in certain browsers - Ensured modal portal uses document.body for consistent rendering across environments Closes heroui-inc#5976
🦋 Changeset detectedLatest commit: afce1eb The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Someone is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/image
@heroui/input
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-aria-overlay
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-form-reset
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/use-viewport-size
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
commit: |
wingkwong
requested changes
Jan 2, 2026
Member
wingkwong
left a comment
wingkwong
left a comment
There was a problem hiding this comment.
Basically same comments from the previous one.
- please share a minimal reproducible sandbox for the original issue so that we can compare it with your PR changes
- 1 check failed. please take a look.
- update this PR with a meaningful title
Author
|
hi please check in description i added the heading as well as sandbox link it is and intermittent issue |
Member
|
your sandbox is not accessible. Also doc build failed. |
Author
|
i change the status of sandbox public |
…is DOM is available
…is DOM is available
Author
|
please review again |
Author
|
please review it |
thabanitona-design
approved these changes
Jan 11, 2026
|
I think this is an issue in react-aria, see this issue where I provided a patch that fixes it: adobe/react-spectrum#8786 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🐛 Fix: Modal inputs not visually updating (Intermittent)
📝 Description
This PR fixes an intermittent rendering issue where input state changes inside the Modal component were not visually reflected, even though React state updates and component re-renders were occurring correctly.
The issue primarily affected modal content rendered via portals and animations, causing DOM updates to appear “frozen” in certain environments and browsers.
⛳️ Current behavior (before fix)
Inputs inside Modal did not visually update despite state changes.
React state updates and re-renders were confirmed via console.log.
Affected components included:
Native HTML inputs (checkbox, text, etc.)
HeroUI Input and Checkbox
Button loading states and other interactive elements
Behavior was intermittent and environment-dependent.
🔁 Reproduction (intermittent)
CodeSandbox demonstrating the issue:
👉 https://codesandbox.io/p/devbox/heroui-modaltest-forked-lvtc3q?file=%2Fsrc%2FApp.js&workspaceId=ws_AzzPzxqhuZ9Tf5xvGNfXn8
🚀 New behavior (after fix)
Modal inputs now reliably update visually in response to state changes.
Removed scale-based transforms from modal animations to avoid rendering glitches in certain browsers.
Ensured the modal portal consistently mounts to document.body for stable rendering across environments.
💣 Is this a breaking change?
No
📝 Additional Information
Animation fix
packages/components/modal/src/modal-transition.ts
→ Removed scale transforms from modal animations.
Portal fix
packages/components/modal/src/modal.tsx
→ Updated portal container fallback to always use document.body.
Includes a changeset for automated changelog generation.
Closes #5976
🧪 Testing
Existing Modal component tests pass.
Manually verified that:
Native inputs update correctly
HeroUI form components reflect state changes
Button loading states update as expected
Confirmed fix resolves the intermittent rendering issue in modal contexts.