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

Fix web components as openers/closers not working properly #713

Merged
merged 2 commits into from
Sep 9, 2024

Conversation

KittyGiraudel
Copy link
Owner

Fixes #712.

},
}

cy.spy(handlers, 'show').as('show')
cy.spy(handlers, 'hide').as('hide')
cy.window().its('instance').invoke('on', 'show', handlers.show)
cy.window().its('instance').invoke('on', 'hide', handlers.hide)
cy.get('my-dialog').shadow().find('fancy-button').first().click()
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests were passing because .click() was clicking the exact shadow root. A .realClick() however would click the inner <slot> and cause the test to fail, as reported in #712.

) {
this.hide(event)
}
const opener = closest(`[${SCOPE}-show="${this.id}"]`, target)
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code was massaged a bit to be easier to read but the fix is the use of closest(..).

Comment on lines +203 to +205
// we use our custom `closest(..)` function so that it can cross shadow
// boundaries
// See: https://github.com/KittyGiraudel/a11y-dialog/issues/712
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the actual fix explanation.

@KittyGiraudel KittyGiraudel merged commit d0cfeed into main Sep 9, 2024
3 checks passed
@KittyGiraudel KittyGiraudel deleted the openers-closers-shadow-boundaries branch September 9, 2024 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Using data-a11y-dialog-show with web components
2 participants