[Bug]: Overlay is raised too high on the screen when keyboard is open for tablet device

[yogeshapps]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-overlay, sp-popover

Expected behavior

The panel should remain visible to the user and reposition itself based on trigger element position.

Actual behavior

When keyboard is open, overlay is raised too high and user is unable to use the panel

Screenshots

Overlay.Out.of.Viewport.Issue.mov

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories in iPad. I used iPad Air.
2. Click on Click on Button Popover
3. Click on Example Textfield
4. Popover is closed on open of soft keyboard of iPad.

Sample code or abstract reproduction which illustrates the problem

https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories
Created a story of the sample code.

No response

Severity

SEV 1

Logs taken while reproducing problem

No response

[TarunAdobe]

Hey @yogeshapps can you create a reproduction of this here so that we can triage it better.

[Rajdeepc]

Hi @yogeshapps Just a friendly reminder: before we begin investigating reported issues, it's essential that the bug reporter follows the bug reporting guidelines. The current ticket is missing important details like repro steps and device diagnostics, which are crucial for efficient triage. Appreciate everyone's effort in keeping the process smooth and efficient!

[yogeshapps]

Hi @Rajdeepc I have created a story https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories and added steps around this.

[TarunAdobe]

Hello @yogeshapps using type="modal" in the overlay-trigger will solve this issue in ipads. Checkout the updated repro.
Here's the explanation for your future reference.

[Rocss]

@TarunAdobe I don't think using a modal overlay is the proper solution here...
According to documentation, "they should be used when you need to ensure that the user has interacted with the content of the Overlay before continuing with their work" which is not the case in the video.

The type=modal also adds additional functionality such as focus management which I don't think we want here, see related thread: https://adobe.slack.com/archives/CESK60MQD/p1730713316574589

[yogeshapps]

@Rocss Rightly siad. ColorPicker in Express is of popover type where user can continuously preview there changes without closing it. Popover is the right choice here and not modal.