Skip to content

fix(dialog): prevent close when click released in scrim #4770

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

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

Conversation

vdegenne
Copy link
Contributor

This is an attempt to avoid the dialog to close when the mouse click was initiated inside the content but released from the scrim.

@@ -238,7 +238,7 @@ export class Dialog extends LitElement {
.returnValue=${this.returnValue || nothing}
>
<div class="container"
@click=${this.handleContentClick}
@mousedown=${this.handleContentMouseDown}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we swap this to pointerdown?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

And preserving the existing click event you mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I swapped to pointerdown and renamed the flag so it reads better.

Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't click return the target where mouse up happens?

@asyncLiz
Copy link
Collaborator

Update on this, there's some screenshot test failures that need more investigating, so apologies for the delay

@vdegenne
Copy link
Contributor Author

Update on this, there's some screenshot test failures that need more investigating, so apologies for the delay

Can you give me more details? the tests run fine on my end.

@asyncLiz
Copy link
Collaborator

Update on this, there's some screenshot test failures that need more investigating, so apologies for the delay

Can you give me more details? the tests run fine on my end.

It's internal tests, so they don't run on github 😔

@AndrewJakubowicz
Copy link
Collaborator

I haven't had a chance to dig into it, but the failing test looks something like this: https://lit.dev/playground/#gist=62443e4343a872dc51982907ea6dfc9d

  <md-dialog open>
       <div slot="headline">Dialog</div>
        <div slot="content" style="height: 500px;">
          <md-filled-select menu-fixed>
            <md-select-option headline="Apple" value="apple"></md-select-option>
            <md-select-option headline="Apricot" value="apricot"></md-select-option>
          </md-filled-select>
        </div>
        <div slot="actions">
          <md-filled-button>Cancel</md-filled-button>
        </div>
  </md-dialog>

The failing test is that clicking the md-filled-select after this change doesn't open the select, when it expects the md-filled-select to open.

@vdegenne
Copy link
Contributor Author

vdegenne commented Sep 13, 2023

I noticed quite a few quirks on the select element (not just in a dialog), maybe it's a good opportunity to polish this element instead of trying to fix one problem related to this specific case.

This is the first one I spotted: #4915

@e111077
Copy link
Contributor

e111077 commented Sep 19, 2023

the failing screenshot test seems to be weird. I can't nail down the exact issue but looks flaky when attempting to reproduce the issue with a debugger in a live environment in the test. Otherwise, normal interaction looks good. Gonna have to spend a bit of time to figure out what's going on here

@austinw-fineart
Copy link

I've got a failing case that's easy to reproduce:

  1. Put a checkbox in the dialog
  2. Toggle the checkbox with the Spacebar
  3. Watch it close the dialog

Not every click event has a preceding pointerdown event so the next click will fail the check. You should probably just handle both events.

@vdegenne
Copy link
Contributor Author

@austinw-fineart This looks like a different issue to me, plus I couldn't reproduce it.
If you have a problem could you open another issue and join a playground to it?
You can use this template: https://lit.dev/playground/#gist=db372518cfa9cd6097b7842e6da5f740
Thanks

@austinw-fineart
Copy link

@vdegenne I'm afraid I do not know how to import this into playground. I ran the test case on this pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants