simulate native <select> dropdown

[eoghanmurray]

A user clicking on a dropdown to look through the options is a significant event (think ecommerce site). At the moment, I believe this action is not replayable whenever it happens on a native element. Would it be worthwhile to simulate the appearance of the dropdown in the replayer, even if we likely can't 100% recreate how it looked in the original browser? We have the list of so could use very generic styling and positioning to show a 'good enough' menu.

I guess we'd have to trigger on a mouseDown event on the and remove the menu after any subsequent mouseUp event (at least that's how it seems to play out in Chromium).

[no-1ne]

simulating mouse clicks may take this down into a rabbit hole, if shadow-dom is handled will the issues will be resolved(staying read only and capturing only final UI changes)

[eoghanmurray]

We are already simulating changing CSS state upon mouse hover, so I'd consider this proposal to be in the same vein. Actually I don't think I understand your comment at all! In particular: what is the relevance of shadow-dom? And what do you mean by read-only?

[no-1ne]

After mouse clicks, there will be changes at the html level ( at a dom level or via shadow dom) is it possible those can be captured so that hopefully there will be no need to simulate mouse clicks and all & just capture the state of webpage.

[eoghanmurray]

Ah okay; ya I can't see any DOM changes when a menu is clicked. Are you saying it's possible to track shadow-dom changes?
I guess it's related to this one: #38 — you are not working on that?

[no-1ne]

To make sure shadow dom will help, when menu is clicked, on the new UI, try right-click-inspect on that.

Yes that's the relavent issue, from comments on the thread, this seems helpful https://github.com/medialize/ally.js/blob/master/src/observe/shadow-mutations.js

[eoghanmurray]

How would you replay the changes to the shadow dom though?

[no-1ne]

It's almost like normal dom

let shadow = elementRef.attachShadow({mode: 'open'});

While To access the shadowroot let myShadowDom = myCustomElem.shadowRoot;

[no-1ne]

Since iframe recording is now possible thanks to the recent commit, hope shadow dom also can also be pulled off.

[Juice10]

Looks like we can't record this with Shadow Dom. Otherwise we could do document.querySelector('iframe').contentDocument.querySelector('select').attachShadow({mode: 'open'}) on https://interactive-examples.mdn.mozilla.net/pages/tabbed/select.html (safari)

But maybe we can create our own representation of the dropdown instead

[Juice10]

I've also tried simulating mouse clicks in the past, it works for some browsers but doesn't for others.