-
Notifications
You must be signed in to change notification settings - Fork 130
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
Prototype a version relying on ‘CloseWatcher’ #717
base: main
Are you sure you want to change the base?
Conversation
src/a11y-dialog.ts
Outdated
@@ -5,6 +5,8 @@ export type A11yDialogInstance = InstanceType<typeof A11yDialog> | |||
|
|||
const SCOPE = 'data-a11y-dialog' | |||
|
|||
let closeWatcher: CloseWatcher | null = null |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
First thing I don’t love about the CloseWatcher
API is that it’s single-use.
Once the watcher received a close event, it no longer processes anything else. That means we need to instantiate a new watcher every time we open the dialog.
There is also no way to know from an existing instance whether or not it’s been consumed or if it can process a close event. That’s not exposed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I agree the API shape is a bit weird. I guess it makes sense that you don't want to constantly keep listening for a close request.
Does this cause an actual problem?
src/a11y-dialog.ts
Outdated
@@ -48,7 +50,8 @@ export default class A11yDialog { | |||
if (destroyEvent.defaultPrevented) return this | |||
|
|||
// Hide the dialog to avoid destroying an open instance | |||
this.hide() | |||
if (closeWatcher) closeWatcher.requestClose() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Second thing I find confusing is the difference between .close(..)
and .requestClose(..)
. Honestly not sure I get it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From what I understand, the difference is that requestClose()
allows the close event to be cancelled (using preventDefault
) whereas close()
will force close it.
For the main purpose of CloseWatcher
(user-initiated close requests), you might be able to get away without using either of these methods.
Edit: It looks like 290eb14 removes the requestClose
👍
src/a11y-dialog.ts
Outdated
closeWatcher.onclose = event => { | ||
this.hide(event) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don’t know whether we should remove the watcher at that point, like this:
closeWatcher.onclose = event => { | |
this.hide(event) | |
} | |
closeWatcher.onclose = event => { | |
this.hide(event) | |
closeWatcher = null | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe it should be defined within local scope to ensure that it automatically gets garbage collected?
Edit: It looks like 290eb14 changes the approach to use a locally scoped CloseWatcher
👍
src/a11y-dialog.ts
Outdated
if (explicitCloser || implicitCloser) { | ||
if (closeWatcher) closeWatcher.requestClose() | ||
else this.hide(event) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a breaking change, because we no longer can provide access to the “closer” (as in the element that was interacted with to close the dialog) via the close watcher. That’s because we can’t pass an event to the .close(..)
or .requestClose(..)
method which would be forwarded to the onclose
callback. So this is a bit shitty and may be a deal breaker for this integration.
f4590df
to
290eb14
Compare
97c6e01
to
69abe57
Compare
No description provided.