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

Prototype a version relying on ‘CloseWatcher’ #717

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

KittyGiraudel
Copy link
Owner

No description provided.

@@ -5,6 +5,8 @@ export type A11yDialogInstance = InstanceType<typeof A11yDialog>

const SCOPE = 'data-a11y-dialog'

let closeWatcher: CloseWatcher | null = null
Copy link
Owner Author

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.

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?

@@ -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()
Copy link
Owner Author

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.

Copy link

@mayank99 mayank99 Sep 13, 2024

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 👍

Comment on lines 85 to 87
closeWatcher.onclose = event => {
this.hide(event)
}
Copy link
Owner Author

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:

Suggested change
closeWatcher.onclose = event => {
this.hide(event)
}
closeWatcher.onclose = event => {
this.hide(event)
closeWatcher = null
}

Copy link

@mayank99 mayank99 Sep 13, 2024

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 👍

Comment on lines 220 to 223
if (explicitCloser || implicitCloser) {
if (closeWatcher) closeWatcher.requestClose()
else this.hide(event)
}
Copy link
Owner Author

@KittyGiraudel KittyGiraudel Sep 10, 2024

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.

Screenshot 2024-09-10 at 11 35 57

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.

2 participants