Comments (11)
As a temporary solution, you can add the aria-id attribute
<v-dropdown aria-id="some-dropdown">
from floating-vue.
I believe it's not a very good thing to generate id for every tooltip and dropdown manually..
from floating-vue.
Headless UI solved this problem with the new UseID function in Nuxt
This solution uses Nuxt's new UseID composable to generate an SSR safe ID.
The warning is caused by the latest version of Nuxt which improved hydration mismatch detection.
from floating-vue.
My soloution for the time being is this:
<script setup>
const ariaId = useId()
</script>
<template>
<VDropdown :aria-id="ariaId" />
</template>
from floating-vue.
Yes you can use ariaId prop to prevent using a random id for the aria-describedby
attribute.
Maybe it could be fixed in nuxt via the module but I'm not sure.
from floating-vue.
Also is this caused by popper that are already open when they are rendered on the server? For example with :shown="true"
from floating-vue.
from floating-vue.
in Nuxt3 I used
<ClientOnly>
<template #fallback>
<Item2Render />
</template>
<VTooltip>
<Item2Render />
<template #popper>
<PopperContent />
</template>
</VTooltip>
<ClientOnly>
from floating-vue.
the above works for the ariaId
issue but I am getting
- rendered on server: tabindex=""
- expected on client: tabindex="0"
Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
You should fix the source of the mismatch.
at <VPopperContent ref="popperContent" popper-id="dropdown" theme="info-dropdown" ... >
at <Popper ref="popper" theme="info-dropdown" referenceNode=null ... >
at <Dropdown triggers= ['click'] skidding=-30 distance=25 >
when using a Dropdown
so the contents of the Popper
are clickable
from floating-vue.
Yes you can use ariaId prop to prevent using a random id for the
aria-describedby
attribute. Maybe it could be fixed in nuxt via the module but I'm not sure.
This was useful for me, but it might not be the best approach as it causes the vuejs-accessibility's aria-props to throw errors at me. I wonder if there's another way to address this?
from floating-vue.
the above works for the
ariaId
issue but I am getting- rendered on server: tabindex="" - expected on client: tabindex="0" Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead. You should fix the source of the mismatch. at <VPopperContent ref="popperContent" popper-id="dropdown" theme="info-dropdown" ... > at <Popper ref="popper" theme="info-dropdown" referenceNode=null ... > at <Dropdown triggers= ['click'] skidding=-30 distance=25 >
when using a
Dropdown
so the contents of thePopper
are clickable
Hey, same issue here
Did you found a solution to that please ?
from floating-vue.
Related Issues (20)
- Popover becomes sticky HOT 4
- Images not rendering in tooltip HOT 1
- Performance issue on too many popovers ? HOT 4
- Ater updating to v5.1 the v-close-popper directive no longer works HOT 1
- @click not fired in elements inside a v-close-popper HOT 8
- body class
- Vue 3 Warning
- Using VTooltip Component Not Working HOT 1
- Re-focusing the trigger, when closing via `esc` key HOT 5
- Popover v-close-popover no longer closes the popover.
- Popover @click isn't triggered on IOS HOT 10
- Bottom position as fallback
- Dropdown boundary is not taken into account
- Accessibility: the active tooltip loses the ability to dismiss it with "escape" key when autoHide: true and noAutoFocus: true HOT 1
- [plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first. HOT 2
- Why swapping `title` with `data-original-title` for tooltips?
- .mjs package "currently no loaders are configured to process this file" error on webpack
- add prop to prevent hide on target click
- disposeTimeout prop not exist in 1.0.0-beta.19 version
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from floating-vue.