ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

[Popups]: Issue with value state popups in Safari

Open elenastoyanovaa opened this issue 1 month ago • 0 comments

Bug Description

Navigating between input fields with value states with TAB is limited due to an issue in Safari browser with an opened browser console. There is a flickering/autoclose of the value state popup, which sometimes leads to focus lost or focus trap of the owned component.

The issue is reproducible maybe in all input fields with value states, for example - Prompt Input, Select, ComboBox.

Affected Component

ui5-select, ui5-ai-prompt-input, ui5-combobox, ui5-time-picker...

Expected Behaviour

Navigation should be possible between all elements with focus. Focus should not be lost or navigation should not be blocked.

Isolated Example

No response

Steps to Reproduce

  1. Select https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/Select.html?sap-ui-theme=sap_horizon Open the test page with an opened console.

  2. Navigate the page using TAB.

  3. When reaching the first select with value state. Press tab again. You will see a flickering of the popup as well as a focus lost.

  4. ComboBox https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/ComboBox.html?sap-ui-theme=sap_horizon Open the test page with an opened console.

  5. Navigate the page using TAB.

  6. When reaching the first combobox with value state. Press tab again. You will see a flickering of the popup as well as a focus lost.

  7. Press TAB again to go to the warning combobox. Try to press tab to go to the next combobox -> Nothing happens, the focus is trapped

  8. TimePicker/DatePicker https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/DatePicker.html?sap-ui-theme=sap_horizon https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/TimePicker.html?sap-ui-theme=sap_horizon Open the test page with an opened console.

  9. Navigate the page using TAB.

  10. When reaching the first picker component with value state. You will see a the value state popup for a second, then it will close automatically.

Log Output, Stack Trace or Screenshots

No response

Priority

Very High

UI5 Web Components Version

2

Browser

Safari

Operating System

macOS

Additional Context

No response

Organization

No response

Declaration

  • [X] I’m not disclosing any internal or sensitive information.

elenastoyanovaa avatar Jul 03 '24 11:07 elenastoyanovaa