diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 5249a4e1dcca..ef124ff55671 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -592,6 +592,30 @@ describe("Select - Accessibility", () => { expect(accessInfo.label).to.equal("Updated Reference"); // Updated aria label from ref }); }); + + it("should have focus only on the selected item when dropdown is opened (not on input)", () => { + cy.mount( + + ); + + cy.get("[ui5-select]").realClick(); + cy.get("[ui5-select]").should("have.attr", "opened"); + + // The input focus ring should not be rendered while opened. + cy.get("[ui5-select]") + .shadow() + .find(".ui5-input-focusable-element") + .then(($el) => { + const style = window.getComputedStyle($el[0], "::after"); + expect(style.getPropertyValue("border-style")).to.equal("none"); + }); + + cy.focused().should("have.attr", "role", "option"); + }); }); describe("Select - Popover", () => { diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 3b1f7fe5321f..7cca1406e2c3 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -8,28 +8,7 @@ } :host([opened]) .ui5-input-focusable-element::after { - content: var(--ui5_input_focus_pseudo_element_content); - position: absolute; - pointer-events: none; - z-index: 2; - border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color); - border-radius: var(--_ui5_input_focus_border_radius); - top: var(--_ui5_input_focus_offset); - bottom: var(--_ui5_input_focus_offset); - left: var(--_ui5_input_focus_offset); - right: var(--_ui5_input_focus_offset); -} - -:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color); -} - -:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color); -} - -:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color); + content: none; } :host([icon]) .ui5-select-root {