DateRangePicker inside Dialog/Modal/Popover on mobile

[ndozhh]

Hi, does anyone have any idea why I get this behavior when displaying a date range selector within a dialog?

I implemented the selector based on this example, with the only difference that the RangeCalendar component I am showing it inside a Dialog when I am in mobile but when selecting a range, the interface has a strange movement and a horizontal and vertical scroll is added to the document for a few seconds and what I could find is that it is due to a div element that is added and has this attribute data-live-announcer="true", as seen in the video if I remove it stops happening.

This only happens on mobile, when I am on desktop I am showing the selector inside a Popover as in the example and it works perfectly. Additionally I am using the MUI Dialog. Thank you very much for any help

video.1.webm

[snowystinger]

No information off the top of my head. Any chance you can reproduce it in a codesandbox? Either building it will shed light on the issue or we'll be able to debug something.

[ndozhh]

Hi, here's a small demo similar to mine, where if you activate mobile mode in devtools you can see de issue. For now I've solved it by adding the following CSS block, and as you can see in the video it seems to work so far.

div[data-live-announcer='true'] {
    margin: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
}

video.2.webm

[snowystinger]

Thanks, I can reproduce it, I'll hopefully be able to investigate it soon.

[snowystinger]

Hey, so I took a look, I'm not seeing anything in our code that would cause this. I know you applied some styles to our live announcer, but that shouldn't be causing any issues. It's positioned absolutely, which removes it from document flow.

I tried it with our own Dialog/Popover, I see the same issue https://codesandbox.io/s/range-calendar-forked-n8x7y4?file=/src/DateRangePicker.js

This leads me to think there's some sort of chrome bug going on here. I started trying to make a minimal reproduction, but haven't quite managed it yet. I don't see it in Safari responsive mode.
Maybe I missed something in this https://jsfiddle.net/3yqgn1fo/5/

[snowystinger]

Does this reproduce on a real device? or only in Chrome's emulation mode?