search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

[ResponsivePopover]: Never gets focus if opened from a sap UI5 dialog #9028

Closed Vir-Mittal closed 3 months ago

Vir-Mittal commented 4 months ago

Bug Description

When using a combination of sap UI5 and ui5-webcomponents, we face an issue with the focus of the elements - If we have a sap ui5 dialog, and then open a ui5-webcomponents ResponsivePopover on top of that dialog, the popover never gets the focus, it remains on the dialog in the background.

Affected Component

ResponsivePopover

Expected Behaviour

The popover should get the focus

Isolated Example

No response

Steps to Reproduce

  1. Open a sap ui5 dialog
  2. Press a button within that dialog to open a ui5-webcomponents ResponsivePopover which has some actionable buttons/fields
  3. The popover never receives the focus, the focus remains on the dialog in the backgroud ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

Latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

Todor-ads commented 3 months ago

Hello @Vir-Mittal , thank you for sharing your findings. Would it be possible for you to provide us with an isolated example in which we can reproduce the problem?

Regards, Todor

Vir-Mittal commented 3 months ago

Hi @Todor-ads , it is difficult to provide a sandbox with that setup, but I can give you access to a hosted instance which has a minimal example of this behaviour. Would that help?

niyap commented 3 months ago

Hello @Vir-Mittal,

In our sample page, we have similar sample where the issue is not reproducible: https://sap.github.io/ui5-webcomponents/storybook/playground/main/pages/ResponsivePopover/ (check RP over a Dialog) Please check the sample and use it as a starting point in order to create a sample with the reproducible issue.

Kind Regards, Niya

Vir-Mittal commented 3 months ago

Hi @niyap , the sample page you provided shows the dialog and RP both in ui5-webcomponents. As mentioned, the problem we are facing is when using a combination of technologies - the dialog is in SAP UI5, while the RP is in ui5-webcomponents. It seems to be an integration issue between the two as the dialog keeps "stealing" the focus from the RP. This is why it is difficult to provide a sandbox example of the setup. I can give you access to a hosted instance which has a minimal example of this behaviour. Would that help?

niyap commented 3 months ago

Hello @Vir-Mittall,

My mistake, I have missed that the dialog is ui5 control. Yes, I think that it would be helpful, if you can provide access to hosted instance where the issue could be reproduced.

Kind Regards, Niya

Vir-Mittal commented 3 months ago

Hello @niyap thank you for your response. I sent you the instance details and steps to reproduce on slack. Please let me know if you have any questions

TeodorTaushanov commented 3 months ago

This issue is fixed in the main and release-1.24 branches.