Environment
|
|
| Operating system |
Windows 10.0.26200 |
| CPU |
AMD Ryzen 7 5800H with Radeon Graphics (16 cores) |
| Node.js version |
v22.16.0 |
| nuxt/cli version |
3.35.1 |
| Package manager |
npm@11.12.1 |
| Nuxt version |
- |
| Nitro version |
- |
| Builder |
vite@6.4.2 |
| Config |
- |
| Modules |
- |
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.4.0
Reproduction
https://play.ui.nuxt.com/#eNq1U01PAjEQ/StNvSJrIieymqjBBA9KFG69NLvjsthtm3YKGMJ/d1qWBRLCRb1sOu+9nfemHxv+YG1/GYAPee4LV1tkHjBYpqSu7gRHL/i90Hm2I2lJBUJjlUSgirF8NjHWLMGlSmA+G2sbcCorz0hVwNyoEhz1eq4VghOcOZCl0eqbFUp6T8zqenBDeJZaUJP07WzYVWE0go7ukWCsdWQt3uqz01zZabBzUb2Vumv6B8Fpmw4d/2+KX+U8MuA9Ol9y/6yr/sIbTZdgk1x4YRpbK3BvFmuj6Q4MWWIiJ5Uyq5eEoQvQ2+PFHIqvM/jCryMm+MSBB7cEwTsOpasAd/To4xXWtO7IxpRBkfoC+Q7eqBAz7mSPQZcU+0iX0o4baxzWupr60Zr22u+HikGjcpv0gtNLeLow+iHubX+Q/hN6y7c/cpAScA==
Description
When UInputTags is placed directly inside UPopover's default slot, the placeholder prop doesn't display even when the component is empty. The placeholder renders correctly when the same component is either:
Wrapped in any element (span, div, etc.) inside the popover
Used standalone outside of a popover
Expected behavior:
The placeholder should render when UInputTags has no tags/model-value, regardless of whether it's a direct child of UPopover.
Actual behavior:
The placeholder is not visible when UInputTags is the immediate child of UPopover's default slot.
Additional context
A workaround that wraps UInputTags in a <span> or <div> inside the popover makes the placeholder render correctly, but this introduces significant behavioral issues:
- Keyboard events don't fire properly on the wrapped component
- Clicking the tag remove button (X) incorrectly triggers the popover to open instead of just removing the tag
- Additional click event handling is required to manage popover state, complicating the implementation
- These interaction issues don't occur when UInputTags is used standalone at the root level
Environment
Windows 10.0.26200AMD Ryzen 7 5800H with Radeon Graphics (16 cores)v22.16.03.35.1npm@11.12.1--vite@6.4.2--Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.4.0
Reproduction
https://play.ui.nuxt.com/#eNq1U01PAjEQ/StNvSJrIieymqjBBA9KFG69NLvjsthtm3YKGMJ/d1qWBRLCRb1sOu+9nfemHxv+YG1/GYAPee4LV1tkHjBYpqSu7gRHL/i90Hm2I2lJBUJjlUSgirF8NjHWLMGlSmA+G2sbcCorz0hVwNyoEhz1eq4VghOcOZCl0eqbFUp6T8zqenBDeJZaUJP07WzYVWE0go7ukWCsdWQt3uqz01zZabBzUb2Vumv6B8Fpmw4d/2+KX+U8MuA9Ol9y/6yr/sIbTZdgk1x4YRpbK3BvFmuj6Q4MWWIiJ5Uyq5eEoQvQ2+PFHIqvM/jCryMm+MSBB7cEwTsOpasAd/To4xXWtO7IxpRBkfoC+Q7eqBAz7mSPQZcU+0iX0o4baxzWupr60Zr22u+HikGjcpv0gtNLeLow+iHubX+Q/hN6y7c/cpAScA==
Description
When UInputTags is placed directly inside UPopover's default slot, the placeholder prop doesn't display even when the component is empty. The placeholder renders correctly when the same component is either:
Wrapped in any element (span, div, etc.) inside the popover
Used standalone outside of a popover
Expected behavior:
The placeholder should render when UInputTags has no tags/model-value, regardless of whether it's a direct child of UPopover.
Actual behavior:
The placeholder is not visible when UInputTags is the immediate child of UPopover's default slot.
Additional context
A workaround that wraps UInputTags in a
<span>or<div>inside the popover makes the placeholder render correctly, but this introduces significant behavioral issues: