Clippings Input Event Not Recorded By ShadowDom

[bmteo]

Hey there, I'm working with custom components via Vue that are using a ShadowDom. I've run into an issue where clippings does not paste the content into an input or editable div within the shadow dom.

As I understand it, input events are composed, so they should bubble down into the shadow dom, however, I don't think that this is the case for Clippings.

Pasting text from the context menu works, and so does the paste event from ctrl + v, but for some reason the input event emitted by Clippings isn't even being captured.

I've tried isolating the element/document that encapsulates the shadowdom, and printing any input events that occur, and events like context menu paste and keyups work, but again Clippings input events aren't being captured.

I'd appreciate any help!

Ben

[aecreations]

Clippings creates and dispatches the input event whenever a "paste" occurs, but the compose property on the event isn't set, so it defaults to false. I can fix that to make the input event composed. Do you have a web page with your custom component that I can test the fix on?

[bmteo]

Hey, unfortunately the exact code that I'm working on isn't available but I can make a Codepen with a shadowdom + insertable div and link it here. Give me a moment

P.S. Thank you for the help!

[bmteo]

https://codepen.io/wd23/pen/yLarwvb

Let me know if this works for you. I can replicate the issue on my end using it

[aecreations]

I've tried setting composed: true on the input event object that is created and dispatched when a clipping is inserted, but that didn't have any effect. I've tested it out in your Codepen snippet, and the clipping is still not being inserted into the "ShadowDom Div" textbox.

Reading through the MDN doc[1], I understand it to mean that setting composed to true on the Event object allows the event to cross the shadow DOM into the standard DOM, but it doesn't say that the reverse is true.

Unless there is something else that can be tried, I'm going to leave it at that for now. I've created a branch in this repo where I've parked the attempted fix.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Event/composed

[willrpike]

master...willrpike:patch-2 fixes this bug.

[bmteo]

@aecreations Could you try it on the codepen link with @willrpike's changes?

[willrpike]

Opened a pull request #327

[aecreations]

Thanks @willrpike for submitting the fix!

Tested using the above Codepen, as well as my own test HTML page, and the HTML editors found in Gmail, Outlook.com and Yahoo! Mail.

[aecreations]

Fixed in Clippings 6.2.6. Release announcement: https://aecreations.blogspot.com/2021/02/clippings-626-released.html