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(dialog): prevent close when click released in scrim #4770

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
Member

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

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.

None yet

5 participants