From 943d6dd6ae57578fbea2c55bb8d7b1d9acbab1b2 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 29 Jul 2025 14:10:41 +0200 Subject: [PATCH 1/2] fix(SelectDialog): apply latest Design and A11y specs --- .../SelectDialog/SelectDialog.cy.tsx | 5 ++-- .../SelectDialog/SelectDialog.module.css | 13 ++++++++++- .../src/components/SelectDialog/index.tsx | 23 ++++++++----------- 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx index d51bbb4a1cf..b4be6c3da02 100644 --- a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx +++ b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx @@ -208,9 +208,10 @@ describe('SelectDialog', () => { cy.get('@search').should('have.callCount', 2); cy.get('@input').should('have.callCount', 4); cy.get('@reset').should('have.callCount', 0); - cy.get('[accessible-name="Reset"][ui5-icon]').click(); + cy.get('[part="clear-icon"][ui5-icon]').click(); cy.get('@search').should('have.callCount', 2); - cy.get('@input').should('have.callCount', 4); + // clearing the input via clear button fires input event as well + cy.get('@input').should('have.callCount', 5); cy.get('@reset').should('have.callCount', 1); cy.get('[accessible-name="Reset"][ui5-icon]').should('not.exist'); }); diff --git a/packages/main/src/components/SelectDialog/SelectDialog.module.css b/packages/main/src/components/SelectDialog/SelectDialog.module.css index 11dfceb33aa..af58a12c832 100644 --- a/packages/main/src/components/SelectDialog/SelectDialog.module.css +++ b/packages/main/src/components/SelectDialog/SelectDialog.module.css @@ -65,7 +65,18 @@ .inputIcon { cursor: pointer; - color: var(--sapContent_IconColor); + color: var(--sapField_TextColor); + + &:hover { + box-shadow: var(--sapField_Hover_Shadow); + background-color: var(--_ui5_input_icon_hover_bg); + } + + &:active { + box-shadow: var(--sapField_Hover_Shadow); + color: var(--sapButton_Active_TextColor); + background-color: var(--sapButton_Active_Background); + } } .infoBar { diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx index e6d6cf275b7..9cfeb288364 100644 --- a/packages/main/src/components/SelectDialog/index.tsx +++ b/packages/main/src/components/SelectDialog/index.tsx @@ -4,13 +4,12 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import InputType from '@ui5/webcomponents/dist/types/InputType.js'; import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; -import iconDecline from '@ui5/webcomponents-icons/dist/decline.js'; import iconSearch from '@ui5/webcomponents-icons/dist/search.js'; import { enrichEventWithDetails, useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactNode } from 'react'; import { forwardRef, useEffect, useState } from 'react'; -import { CANCEL, CLEAR, RESET, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js'; +import { CANCEL, CLEAR, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js'; import { Button, Dialog, FlexBox, FlexBoxAlignItems, Icon, Input, List, Text, Title } from '../../index.js'; import type { Ui5CustomEvent } from '../../types/index.js'; import type { @@ -113,6 +112,7 @@ export interface SelectDialogPropTypes onSearch?: | ((event: Ui5CustomEvent) => void) | ((event: Ui5CustomEvent) => void); + // todo: remove `nativeDetail` in next major version /** * This event will be fired when the reset button has been clicked in the search field or when the dialog is closed. */ @@ -196,6 +196,10 @@ const SelectDialog = forwardRef((props, ref }; const handleSearchInput = (e) => { + if (!e.target.value && e.detail.inputType === '') { + handleResetSearch(e); + } + if (typeof onSearchInput === 'function') { onSearchInput(enrichEventWithDetails(e, { value: e.target.value })); } @@ -318,25 +322,18 @@ const SelectDialog = forwardRef((props, ref onInput={handleSearchInput} onKeyUp={handleSearchSubmit} type={InputType.Search} + showClearIcon icon={ <> - {searchValue && ( - - )} + {/*Decorative type while still being interactive is by design (see SapUI5 implementation)*/} } From 7509a741d42c959d0d9a85eb1e39634632dc4320 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 29 Jul 2025 14:12:01 +0200 Subject: [PATCH 2/2] Update index.tsx --- packages/main/src/components/SelectDialog/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx index 9cfeb288364..ad32c63e79e 100644 --- a/packages/main/src/components/SelectDialog/index.tsx +++ b/packages/main/src/components/SelectDialog/index.tsx @@ -333,7 +333,6 @@ const SelectDialog = forwardRef((props, ref onClick={handleSearchSubmit} accessibleName={i18nBundle.getText(SEARCH)} title={i18nBundle.getText(SEARCH)} - data-component-name="SelectDialogSearchIcon" /> }