We wrongly assume that backdropRef will be dialogs root
renatodeleao opened this issue · 0 comments
renatodeleao commented
This came from the one to one match of the markup version:
<a11y-vue-dialog-renderless #default="{ backdropRef }">
<!-- i work as root but also as backdrop overlay -->
<div class="dialog" v-bind="backdropRef.props">
<div class="dialog__inner">conent</div>
<div>
</div>
But this is also a valid implementation, and currently will break the component
<a11y-vue-dialog-renderless #default="{ backdropRef }">
<!-- i work as root -->
<div class="dialog">
<div class="dialog__backdrop" v-bind="backdropRef.props" />
<div class="dialog__inner">conent</div>
<div>
</div>
Cause
Our dom "refs", are querySelected
assuming a dialogRoot exists and is the element with data-id
, but that data-id
is bound via backdropRef.props
, meaning it won't find the descendents.
a11y-vue-dialog/src/A11yVueDialogRenderless.vue
Lines 176 to 188 in 34f5985