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

[Feature Request]: Support top-layer / dialog HTML component #1381

Closed
1 task done
daibhin opened this issue Jan 2, 2024 · 3 comments · Fixed by #1503 or #1526
Closed
1 task done

[Feature Request]: Support top-layer / dialog HTML component #1381

daibhin opened this issue Jan 2, 2024 · 3 comments · Fixed by #1503 or #1526
Labels
feature request Things want to be added

Comments

@daibhin
Copy link
Contributor

daibhin commented Jan 2, 2024

Preflight Checklist

  • I have searched the issue tracker for a feature request that matches the one I want to file, without success.

What package is this feature request for?

rrweb

Problem Description

RRWeb incorrectly positions the dialog modal.

Created a reproducible example where the modal should appear center vertical / horizontal in the body (as is circled using the mouse) but is aligned top in the replay:
https://rrwebdebug.com/play/index.html?url=http://jsonblob.com/1191711996356976640&version=2.0.0-alpha.11&virtual-dom=on&play=on

Proposed Solution

Support the top layer to layout the modal separately to the rest of the dom

Alternatives Considered

None

Additional Information

No response

@daibhin daibhin added the feature request Things want to be added label Jan 2, 2024
@Juice10
Copy link
Contributor

Juice10 commented May 16, 2024

Just bumped into this issue myself as well.

I suggest we record the open attribute as something special like _rr_open="modal" if showModal was called to open the dialog box in this way.
Also we can call dialogEl.matches('dialog:modal') to check if the element was triggered with showModal or not.

For popover elements can listen to the toggle event and check .matches('[popover]:popover-open') to see if popover was opened. Or we could monkey patch HTMLElement.hidePopover() HTMLElement.showPopover() HTMLElement.togglePopover() to listen for toggles.

requestFullscreen is a bit tricker.

@hpvd
Copy link

hpvd commented May 16, 2024

+1 on this.
We should be aware that in some UIs, there are cases where several layers of modals open above each other and it looks like:
2024-05-16_16h55_11

@Juice10
Copy link
Contributor

Juice10 commented Jun 6, 2024

@hpvd good point, however I haven't been able to find any way of accessing the order of opened dialog boxes. For full snapshots that's unlucky, for incremental snapshots it should be much easier to capture/replay this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Things want to be added
Projects
None yet
3 participants