HeroUI Chat

UI Bug Fixes

5 snippets

Fix Transition Flicker

Fix flickering animations on HeroUI transitions when components mount/unmount rapidly.

Fix HeroUI transition flickering. Steps: - Wrap component in `AnimatePresence` if using Framer Motion - Use `transition: all` and avoid conflicting Tailwind utilities - Double-check exit animations and visibility toggling logic

Fix Tooltip Positioning

Fix misaligned HeroUI Tooltip when used inside flex or absolute containers.

Fix HeroUI Tooltip misalignment. Check: - Parent has relative positioning - Tooltip uses absolute with correct offset - Adjust via `top`, `left`, or use Popper placement props

Fix Button Nesting Warning

Resolve React warning: 'validateDOMNesting(...): <button> cannot appear as a descendant of <button>' when using HeroUI buttons.

Fix the nesting issue with HeroUI Button in Autocomplete or dropdown. Solution: - Avoid wrapping HeroUI Button inside another button element - Use a <div> or <span> as container instead - Refactor conditional rendering logic to wrap only internal...

Fix Modal Scroll Lock Issue

Fix body scroll not locking when HeroUI Modal is opened in certain browsers.

Fix scroll lock issue for HeroUI Modal. Steps: - Ensure Modal is wrapped in HeroUIProvider - Confirm `modal` is rendered at root level - Use `overflow-hidden` on <body> when modal is active

Fix Input Border Overflow

Fix border overflow issues when HeroUI Input is placed in a flex container with constrained width.

Fix HeroUI Input rendering overflow in flex layout. Steps: - Wrap input in container with w-full or max-w-sm - Add `overflow-hidden` and `rounded-md` - Prevent long text from breaking layout