jquery-ui icon indicating copy to clipboard operation
jquery-ui copied to clipboard
verified publisher icon jquery

Update cancel check to be shadowRoot compatible

Open malarahfelipe opened this issue 3 years ago • 12 comments

This proposal is made to ensure if the event should be canceled if the first element in the composedPath (or the event.target as fallback) matches with the options.cancel selector

This behaviour happens when we're using shadowRoot and we're trying to cancel the mousedown event when it starts from an element within the shadowRoot.

malarahfelipe avatar Jun 10 '22 02:06 malarahfelipe

CLA Signed

The committers listed above are authorized under a signed CLA.

  • :white_check_mark: login: malarahfelipe / name: Felipe Mateus Malara (3a1b590817aaa692f53ae1d8354d8d3485594c23)

linux-foundation-easycla[bot] avatar Jun 10 '22 02:06 linux-foundation-easycla[bot]

@mgol What do you think about this? @malarahfelipe Can you try fixing the tests?

fnagel avatar Jun 22 '22 10:06 fnagel

@fnagel sure thing 👍

malarahfelipe avatar Jun 22 '22 12:06 malarahfelipe

Fixed @fnagel.

Surely this is a specific case scenario, where I'm using Sortable with Web Components, but this may come in hand when Web Components get more and more popular

As answered in the question below, the purpose of using event.composedPath() is to get specifically which element triggered the event within the Web-Component (container).

image

malarahfelipe avatar Jun 23 '22 00:06 malarahfelipe

@malarahfelipe Tests still fail :-(

fnagel avatar Jun 24 '22 12:06 fnagel

Sorry, missed the grunt test workflow I believe is fine now 👍 @fnagel

malarahfelipe avatar Jun 25 '22 02:06 malarahfelipe

Still failing.

fnagel avatar Jun 25 '22 12:06 fnagel

Surely, the lint got me again sorry, now I was able to run them locally and seems fine image

Thanks

malarahfelipe avatar Jun 25 '22 21:06 malarahfelipe

It'd be good to see what case currently doesn't work on a live test case. This PR needs tests anyway, preparing an isolated test case may be a good starting point in creating one.

As it stands, I don't have a specific opinion as I don't understand what exactly this PR is trying to fix.

mgol avatar Jun 27 '22 21:06 mgol

@mgol Thanks for the feedback! I must confess I'm not really familiar with Web Components so I hoped for your input :-)

Maybe @dmethvin can help us out here?

@malarahfelipe Thanks for fixing the tests! Can you give some some more insights?

fnagel avatar Jul 07 '22 23:07 fnagel

Thanks for the feedback on this guys

Sure @fnagel I'll prepare two codepens one using web-components and other not to better explain the differences on this

malarahfelipe avatar Jul 08 '22 00:07 malarahfelipe

Okay, after long time 😅 I've set up three simple codepens to better explain the proposed solution

  1. JqueryUI.Sortable without ShadowRoot https://codepen.io/malarahfelipe/pen/QWmEoVz
  2. JqueryUI.Sortable with ShadowRoot ❌https://codepen.io/malarahfelipe/pen/XWEjpWo
  3. JqueryUI.Sortable with ShadowRoot ✅ https://codepen.io/malarahfelipe/pen/eYMBYGb

Also I've record a <1min loom video just dragging things around so you can see the output in the html / console

https://www.loom.com/share/a2c4f95d5eae4589967a00041bcb7307

Thank you

malarahfelipe avatar Jul 14 '22 00:07 malarahfelipe