Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

We wrongly assume that backdropRef will be dialogs root #20

Open
renatodeleao opened this issue May 1, 2020 · 0 comments
Open

We wrongly assume that backdropRef will be dialogs root #20

renatodeleao opened this issue May 1, 2020 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@renatodeleao
Copy link
Owner

renatodeleao commented May 1, 2020

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.

getDOMRefs() {
this.trigger = document.activeElement;
this.dialogRoot = document.querySelector(`[data-id="a11y-vue-dialog-${this._uid}"]`);
if (this.dialogRoot) {
this.dialogEl = this.dialogRoot.querySelector('[data-ref="dialog"]');
this.closeEl = this.dialogRoot.querySelector('[data-ref="close"]');
this.focusRef = this.dialogRoot.querySelector('[data-ref="focus"]');
return true
}
return false
},

@renatodeleao renatodeleao added the bug Something isn't working label May 1, 2020
@renatodeleao renatodeleao added this to the 0.5.0 milestone May 1, 2020
@renatodeleao renatodeleao self-assigned this May 1, 2020
@renatodeleao renatodeleao removed this from the 0.5.0 milestone Aug 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant