feat(SelectDialog): add searchPlaceholder prop

cypress.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
       bundler: 'vite',
     },
     experimentalRunAllSpecs: true,
-    excludeSpecPattern: ['**/e2e/**', ...(process.env.CI ? ['**/SelectDialog/**'] : [])],
+    excludeSpecPattern: ['**/e2e/**'],
   },
   includeShadowDom: true,
   viewportWidth: 1920,

packages/main/src/components/SelectDialog/SelectDialog.stories.tsx

@@ -16,7 +16,11 @@ import { SelectDialog } from './index.js';
 const meta = {
   title: 'Modals & Popovers / SelectDialog',
   component: SelectDialog,
-  argTypes: { children: { control: { disable: true } } },
+  argTypes: {
+    children: { control: { disable: true } },
+    onSearch: { control: { disable: true } },
+    onCancel: { control: { disable: true } },
+  },
   args: { headerText: 'Select Product', open: isChromatic },
   parameters: {
     chromatic: { delay: 1000 },

packages/main/src/components/SelectDialog/index.tsx

@@ -118,6 +118,13 @@ export interface SelectDialogPropTypes
    * @since 1.25.0
    */
   confirmButtonProps?: Omit<ButtonPropTypes, 'onClick' | 'design'>;
+  /**
+   *
+   * Allows overriding the SearchField's default placeholder text. If not set, the word "Search" in the current local language or English will be used as a placeholder.
+   *
+   * __Note:__ The placeholder is used as accessible-name of the input for screen reader support.
+   */
+  searchPlaceholder?: string;
   /**
    * This event will be fired when the value of the search field is changed by a user - e.g. at each key press
    */
@@ -169,6 +176,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
     selectionMode = ListSelectionMode.Single,
     numberOfSelectedItems,
     rememberSelections,
+    searchPlaceholder,
     showClearButton,
     onClose,
     onClear,
@@ -341,9 +349,9 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
         )}
         <Input
           className={classNames.input}
-          accessibleName={i18nBundle.getText(SEARCH)}
+          accessibleName={searchPlaceholder ?? i18nBundle.getText(SEARCH)}
           value={searchValue}
-          placeholder={i18nBundle.getText(SEARCH)}
+          placeholder={searchPlaceholder ?? i18nBundle.getText(SEARCH)}
           onInput={handleSearchInput}
           onKeyUp={handleSearchSubmit}
           type={InputType.Search}

packages/main/src/components/SelectDialog/test/SelectDialog.spec.tsx

@@ -1,3 +1,3 @@
 import { expect } from '@playwright/experimental-ct-react';
 import { test } from '../../../../../../playwright/fixtures/main-fixtures.js';
 import {
@@ -129,6 +129,8 @@
     await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
 
     const input = page.locator('[ui5-input]');
+    await expect(input).toHaveAttribute('placeholder', 'Search');
+    await expect(input).toHaveAttribute('accessible-name', 'Search');
     await ui5wc.typeIntoInput(input, 'Test');
     await expect(page.getByTestId('input-val')).toHaveText('input: Test');
     await expect(page.getByTestId('search-count')).toHaveText('0');
@@ -152,6 +154,10 @@
     await expect(page.getByTestId('input-count')).toHaveText('2');
     await expect(page.getByTestId('reset-count')).toHaveText('1');
     await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
+
+    await page.getByTestId('set-placeholder').click();
+    await expect(input).toHaveAttribute('placeholder', 'Hello');
+    await expect(input).toHaveAttribute('accessible-name', 'Hello');
   });
 
   test('confirmButtonText', async ({ mount, page }) => {

packages/main/src/components/SelectDialog/test/SelectDialogTestComponents.tsx

@@ -114,10 +114,15 @@ export const SelectDialogSearchTestComp = () => {
   const [searchCount, setSearchCount] = useState(0);
   const [inputCount, setInputCount] = useState(0);
   const [resetCount, setResetCount] = useState(0);
+  const [searchPlaceholder, setSearchPlaceholder] = useState<SelectDialogPropTypes['searchPlaceholder']>(undefined);
 
   return (
     <>
+      <Button data-testid="set-placeholder" onClick={() => setSearchPlaceholder('Hello')}>
+        Set Placeholder
+      </Button>
       <SelectDialog
+        searchPlaceholder={searchPlaceholder}
         onSearch={(e) => {
           setSearchVal(e.detail.value);
           setSearchCount((c) => c + 1);