@sapudex/web-components 2.21.0 → 2.23.0

package/src/SearchTemplate.tsx

@@ -0,0 +1,353 @@
+import type UDExSearch from "./Search.js";
+import type { SuggestionList } from "./Search.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import search from "@ui5/webcomponents-icons/dist/search.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import microphone from "@ui5/webcomponents-icons/dist/microphone.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
+import UI5PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import UDExControlButton from "./ControlButton.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
+import UI5Button from "@ui5/webcomponents/dist/Button.js";
+import UI5ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+
+export default function SearchTemplate(this: UDExSearch) {
+  return (
+    <>
+      <div class={`udex-search__root ${this.searchClasses}`}>
+        { this.isShowSearchHomePrefix ? renderSearchHomePrefix.call(this) : "" }
+
+        <form role="search" class={`udex-search__container ${this.focusClasses} ${this.isNotEmptyClass}`}>
+          { this.labelAnimationDisabled ? renderInputWithStaticLabel.call(this) : renderInputWithAnimatedLabel.call(this) }
+
+          {
+            this.open ? (
+              <span
+                aria-live="polite"
+                aria-atomic="true"
+                id="search-description"
+                class="hidden"
+                aria-hidden="true"
+              >
+                {this.suggestionsDescription}
+              </span>
+            ) : ""
+          }
+
+          <div class="udex-search__icons">
+            {
+              this.isShowHomeResetButton ? (
+                <UDExButton
+                  id="reset-button"
+                  class="udex-search__button udex-search__reset-button"
+                  size={UDExButtonSize.Small}
+                  design={UDExButtonDesign.Default}
+                  tooltip={this.tooltipInfo.tooltipResetButton}
+                  onClick={this.onReset as any}
+                  onKeyDown={this.handleKeyDownReset}
+                >
+                  <UI5Icon
+                    class="udex-search__button-icon"
+                    accessible-name={this.accInfo.accessibleNameResetIcon}
+                    accessible-role="presentation"
+                    name={decline}
+                  ></UI5Icon>
+                </UDExButton>
+              ) : ""
+            }
+
+            {
+              this.isShowResetButton ? (
+                <UDExControlButton
+                  id="reset-button"
+                  class="udex-search__reset-button"
+                  design={UDExControlButtonDesign.Default}
+                  tooltip={this.tooltipInfo.tooltipResetButton}
+                  icon={decline}
+                  size={UDExButtonSize.Large}
+                  accessible-name={this.accInfo.accessibleNameResetIcon}
+                  onClick={this.onReset as any}
+                  onKeyDown={this.handleKeyDownReset}
+                ></UDExControlButton>
+              ) : ""
+            }
+
+            {
+              this.isVoiceButton ? (
+                <UDExButton
+                  id="voice-button"
+                  class={`udex-search__button udex-search__voice-button ${this.voiceActiveClass}`}
+                  design={UDExButtonDesign.Default}
+                  size={UDExButtonSize.Small}
+                  icon={microphone}
+                  tooltip={this.tooltipInfo.tooltipVoiceButton}
+                  onClick={this.onVoice as any}
+                ></UDExButton>
+              ) : ""
+            }
+
+            {
+              this.showNonInteractiveButton ? (
+                <UI5Icon
+                  class="udex-search__icon"
+                  aria-hidden="true"
+                  accessible-name={this.accInfo.accessibleNameSearchIcon}
+                  name={search}
+                ></UI5Icon>
+              ) : ""
+            }
+
+            {
+              this.showSubmitHomeButton ? (
+                <UDExButton
+                  id="submit-button"
+                  class={`udex-search__button udex-search__submit-button ${this.searchButtonActiveClass}`}
+                  design={UDExButtonDesign.Default}
+                  icon={search}
+                  size={UDExButtonSize.Small}
+                  tooltip={this.tooltipInfo.tooltipSubmitButton}
+                  onClick={this.onSubmit as any}
+                ></UDExButton>
+              ) : ""
+            }
+
+            {
+              this.showSubmitStandardButton ? (
+                <UDExControlButton
+                  id="submit-button"
+                  class="udex-search__submit-button"
+                  size={UDExButtonSize.Large}
+                  design={UDExControlButtonDesign.Default}
+                  icon={search}
+                  tooltip={this.tooltipInfo.tooltipSubmitButton}
+                  onClick={this.onSubmit as any}
+                ></UDExControlButton>
+              ) : ""
+            }
+          </div>
+        </form>
+      </div>
+
+      { renderSearchSuggestionPopover.call(this) }
+    </>
+  );
+}
+
+function renderSearchHomePrefix(this: UDExSearch) {
+  return (
+    <div class={`udex-search__prefix ${this.prefixWrapperClasses}`}>
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={this._prefixDropdownExpanded}
+        aria-label={this.labelPrefix}
+        aria-haspopup="true"
+        aria-controls="udex-search-prefix"
+        class="udex-search__prefix-button"
+        onClick={this.handleDropdownClick}
+      >
+        <span class="udex-search__prefix-label">{this.labelPrefix}</span>
+        <UI5Icon
+          class="udex-search__prefix-icon"
+          name={slimArrowDown}
+          mode={UI5IconMode.Decorative}
+        ></UI5Icon>
+      </button>
+
+      <UI5Popover
+        id="udex-search-prefix"
+        class={this.prefixPopoverClasses}
+        hide-arrow
+        placement={UI5PopoverPlacement.Bottom}
+        horizontal-align={UI5PopoverHAlign.Start}
+        style={this.prefixPopoverStyles}
+        onClose={this.handleAfterClosePrefixPopover}
+      >
+        <slot></slot>
+      </UI5Popover>
+    </div>
+  );
+}
+
+function renderSearchInput(this: UDExSearch, placeholder: boolean = false) {
+  return (
+    <input
+      role="searchbox"
+      id="search-input"
+      type="search"
+      name="search"
+      class="udex-search__field"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup={this.getAriaHasPopup}
+      aria-label={this.accInfo.ariaLabel}
+      aria-describedby="search-description"
+      {...(placeholder ? { placeholder: this.effectivePlaceholder } : {})}
+      value={this.value}
+      onInput={this.handleSearchChange}
+      onKeyDown={this.handleKeyDown}
+      onFocus={this.handleFocus}
+      onFocusOut={this.handleFocusout}
+      onBlur={this.handleBlur}
+      onClick={this.handleInputClick}
+    />
+  );
+}
+
+function renderInputWithStaticLabel(this: UDExSearch) {
+  return renderSearchInput.call(this, true);
+}
+
+function renderInputWithAnimatedLabel(this: UDExSearch) {
+  return (
+    <>
+      {
+        this.label ? (
+          <label for="search-input" class={this.labelClasses}>
+            {this.label}
+          </label>
+        ) : ""
+      }
+
+      { renderSearchInput.call(this, false) }
+    </>
+  );
+}
+
+function renderSearchSuggestionPopover(this: UDExSearch) {
+  return (
+    <UI5Popover
+      class={`udex-search-suggestions__root ${this.homeSearchPopoverClass}`}
+      hide-arrow
+      prevent-initial-focus
+      placement={UI5PopoverPlacement.Bottom}
+      horizontal-align={UI5PopoverHAlign.End}
+      style={this.popoverStyles}
+      id={this.getSuggestionsPopoverId}
+      aria-orientation="vertical"
+      accessible-role="Dialog"
+      onKeyDown={this.handleKeyPressSuggestionList}
+      accessible-name={this.suggestionsAccessibleName}
+    >
+      {
+        this.showNoResultMessage ? (
+          <span class="udex-search-suggestions__message">{this.noResultMessage}</span>
+        ) : renderSearchSuggestionPopoverResults.call(this)
+      }
+    </UI5Popover>
+  );
+}
+
+function renderSearchSuggestionPopoverResults(this: UDExSearch) {
+  return (
+    <div role="tree">
+      {
+        this.isShowSuggestedList ? (
+          renderSearchSuggestionPopoverResultsSuggestedList.call(this)
+        ) : ""
+      }
+
+      {
+        this.isShowRecommendedList ? (
+          renderSearchSuggestionPopoverResultsRecommendedList.call(this)
+        ) : ""
+      }
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsSuggestedList(this: UDExSearch) {
+  return (
+    <div class="udex-search-suggestions__block" role="treeitem">
+      {
+        this.suggestedHeading ? (
+          <span class="udex-search-suggestions__heading" id="suggested-heading">
+            {this.suggestedHeading}
+          </span>
+        ) : ""
+      }
+
+      <div class="udex-search-suggestions__list"
+        role="listbox"
+        aria-labelledby="suggested-heading"
+        tabindex={0}
+        onKeyDown={this.handleKeyDownPopover}
+      >
+        {
+          this.suggestedList.map((item, i) => (
+            <UI5Button
+              key={i}
+              id={item.id}
+              icon={item.icon}
+              type="Button"
+              design={UI5ButtonDesign.Default}
+              accessible-name={item.suggestionDescription}
+              class="udex-search-suggestions__item-button"
+              title={item.title}
+              tabindex={-1}
+              role="option"
+              onClick={item.handleSelectItem}
+              dangerouslySetInnerHTML={{ __html: item.text }}
+            ></UI5Button>
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsRecommendedList(this: UDExSearch) {
+  return (
+    <div class="udex-search-suggestions__block" role="treeitem">
+      {
+        this.recommendedHeading ? (
+          <span class="udex-search-suggestions__heading" id="recommended-heading">
+            {this.recommendedHeading}
+          </span>
+        ) : ""
+      }
+
+      <div class="udex-search-suggestions__list"
+        role="listbox"
+        aria-labelledby="recommended-heading"
+        tabindex={0}
+        onKeyDown={this.handleKeyDownPopover}
+      >
+        {
+          this.recommendedList.map((item, i) => (
+            item.hasCustomIcon ? (
+              renderSearchSuggestionPopoverResultsRecommendedListButton(item, i, item.icon)
+            ) : (
+              renderSearchSuggestionPopoverResultsRecommendedListButton(item, i)
+            )
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsRecommendedListButton(button: SuggestionList, key: number, icon: string | undefined = undefined) {
+  return (
+    <UI5Button
+      key={key}
+      id={button.id}
+      {...(icon ? { "icon": icon } : {})}
+      type="Button"
+      design={UI5ButtonDesign.Default}
+      class="udex-search-suggestions__item-button"
+      accessible-name={button.suggestionDescription}
+      title={button.title}
+      tabindex={-1}
+      role="option"
+      onClick={button.handleSelectItem}
+      dangerouslySetInnerHTML={{ __html: button.text }}
+    ></UI5Button>
+  );
+}

package/src/SearchableListBase.ts

@@ -3,16 +3,17 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import { UDExListMode } from "./types/List.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
-import { isDown, isUp } from "@ui5/webcomponents-base/dist/Keys.js";
-import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import type { UDExProcessedItem } from "./types/SearchableListBase.js";
 import type UDExSearch from "./Search.js";
 import type UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
-import { UDExListMode } from "./types/List.js";
+import type UDExList from "./List.js";
+import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
-import type { UDExProcessedItem } from "./types/SearchableListBase.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
 import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
@@ -49,7 +50,7 @@ export type UDExSearchableListBaseEvents = {
  * @class
  *
  * A class to serve as a foundation
- * for the <code>UDExFilterMenu</code> , <code>UDExSelectBox</code> and <code>UDExCountrySelector/code> classes.
+ * for the <code>UDExFilterMenu</code> and <code>UDExSelectBox</code> classes.
  *
  * @constructor
  * @author SAP SE
@@ -59,8 +60,12 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user click on an item on the list.
- *
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
+ * @param {UDExListItemBase | UDExListGroupHeaderBase | null | undefined} item The clicked item.
  * @public
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
+ * @param {UDExListItemBase | UDExListGroupHeaderBase | null | undefined} item The clicked item.
+ *
  */
 @event("selection-change", { bubbles: true })
 
@@ -73,8 +78,10 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user clicks on the submitted icon in the search.
- *
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
  * @public
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
+ *
  */
 @event("submit-search", { bubbles: true })
 
@@ -87,22 +94,29 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user submitted the value in the search.
- *
+ * @param {string} value The search value.
  * @public
+ * @param {string} value The search value.
  */
 @event("change-search", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the first icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  */
 @event("first-icon-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the second icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  */
 @event("second-icon-click", { bubbles: true })
 
@@ -215,7 +229,7 @@ class UDExSearchableListBase extends UI5Element {
     items!: Array<UDExListItemBase | UDExListGroupHeaderBase>;
 
   /**
-   * Defines the default accessible role for the list componnet.
+   * Defines the default accessible role for the list component.
    *
    * @default "list"
    * @public
@@ -223,6 +237,12 @@ class UDExSearchableListBase extends UI5Element {
   @property({ type: String })
     defaultAccessibleRole: string = "list";
 
+  /**
+   * Defines the filtered items for the component.
+   *
+   * @default []
+   * @private
+   */
   @property({ type: Object })
     _filteredItems!: Array<UDExProcessedItem>;
 
@@ -245,16 +265,11 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onItemPress(e:CustomEvent) {
-    const dropdownItemId: string = this.getDataTokenId(e);
+    const dropdownItemId: string = this.getDataTokenId(e.detail.item as UDExListItemBase);
     this.handleDropdownItemPress(dropdownItemId);
     this.fireSelectionChange(dropdownItemId);
   }
 
-  activateHeaderAndSetAllItems(item: UDExListGroupHeaderBase) {
-    item.activateHeader();
-    item.setAllItems(false);
-  }
-
   handleDropdownItemPress(dropdownItemId: string) {
     this.getProcessedItems().forEach(({ item, groupItems, isGroup }) => {
       if (isGroup) {
@@ -291,28 +306,31 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onHeaderPress(e:CustomEvent) {
-    this.handleGroupHeaderSelection(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
+    this.handleGroupHeaderSelection(id);
     this.syncFilteredItems();
-    this.fireSelectionChange(this.getDataTokenId(e));
+    this.fireSelectionChange(id);
   }
 
   onSelectAllHeaderPress(e:CustomEvent) {
-    this.handleGroupHeaderSelection(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
+    this.handleGroupHeaderSelection(id);
     this.syncFilteredItems();
     this.fireDecoratorEvent("select-all");
   }
 
-  handleGroupHeaderSelection(e: CustomEvent): void {
-    const headerItemId = this.getDataTokenId(e);
+  handleGroupHeaderSelection(id: string): void {
     this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === headerItemId) {
+      if (item._id === id) {
         (item as UDExListGroupHeaderBase).handleSelectionGroupState();
       }
     });
   }
 
-  onSearch(e:CustomEvent) {
-    const searchValue: string = e.detail.value;
+  onSearch(value: string) {
+    const searchValue: string = value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
     const items = this.getFlattenItemsArray(this._filteredItems);
@@ -403,15 +421,6 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
-  handleKeyDown(e: KeyboardEvent) {
-    if (isUp(e)) {
-      this.handlePreviousItemFocus(e);
-    }
-    if (isDown(e)) {
-      this.handleNextListItemFocus(e);
-    }
-  }
-
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
     const arr: Array<UDExListItemBase | UDExListGroupHeaderBase> = [];
     items.forEach(item => {
@@ -452,31 +461,6 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
-  // moves focus to next list item
-  handlePreviousItemFocus(e: KeyboardEvent) {
-    const item = e.target as HTMLElement;
-    const listItems = this.getDomListItems();
-    const currentSelectIndex = this.getCurrentIndex(item);
-    const previousSelectIndex = currentSelectIndex - 1;
-    if (currentSelectIndex > 0) {
-      e.preventDefault();
-      (listItems[previousSelectIndex] as HTMLElement).focus();
-    }
-  }
-
-  // moves focus to previous list item
-  handleNextListItemFocus(e: KeyboardEvent) {
-    const item = e.target as HTMLElement;
-    const listItems = this.getDomListItems();
-    const lastItemIndex = listItems.length - 1;
-    const currentSelectIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectIndex + 1;
-    if (nextSelectIndex <= lastItemIndex) {
-      e.preventDefault();
-      (listItems[nextSelectIndex] as HTMLElement).focus();
-    }
-  }
-
   fireFirstIconClickEvent(e: CustomEvent): void {
     this._fireIconClickEvent("first-icon-click", e);
   }
@@ -486,7 +470,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
-    const id = this.getDataTokenId(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
     this.fireDecoratorEvent(eventName, {
       originalEvent: e.detail.originalEvent,
       item: this.getItemFromList(id),
@@ -505,47 +490,44 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
-  getCurrentIndex(item: Element): number {
+  getCurrentIndex(item: UDExListItem): number {
     return this.getDomListItems().indexOf(item);
   }
 
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
+  getList(): UDExList {
+    return this.shadowRoot!.querySelector<UDExList>("[udex-list]")!;
+  }
+
+  getSearch(): UDExSearch | HTMLInputElement {
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")! || this.shadowRoot!.querySelector<HTMLInputElement>(".udex-text-field__search")!;
   }
 
   getPopover(): Popover {
     return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
-  getDomListItems(): Element[] {
+  getDomListItems(): UDExListItem[] {
     const elementList = this.shadowRoot!.querySelector("[udex-list]") as HTMLElement;
     return elementList ? Array.from(elementList.querySelectorAll("[udex-list-item]")) : [];
   }
 
-  setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
-    items.forEach(item => {
-      item.mode = this.mode;
-      item.controlled = this.isControlled;
-    });
-  }
-
-  getDataTokenId(e:CustomEvent): string {
-    return e.detail.item.getAttribute("data-token-id") as string;
+  getDataTokenId(item: UDExListItemBase): string {
+    return item.getAttribute("data-token-id") as string;
   }
 
   getProcessedItems(): Array<UDExProcessedItem> {
     return this.items.map(item => {
-      if (item.isGroup) {
-        const groupItems = (item as UDExListGroupHeaderBase).getItems();
-        this.setItemsModeAndControl(groupItems);
+      const isGroup = item.isGroup;
+      const groupItems = isGroup ? (item as UDExListGroupHeaderBase).getItems() : [];
+
+      if (isGroup) {
+        this._setItemsModeAndControl(groupItems);
       }
+
       item.mode = this.mode;
       item.controlled = this.isControlled;
-      return {
-        item,
-        groupItems: item.isGroup ? (item as UDExListGroupHeaderBase).getItems() : [],
-        isGroup: item.isGroup,
-      };
+
+      return { item, groupItems, isGroup };
     });
   }
 
@@ -563,6 +545,13 @@ class UDExSearchableListBase extends UI5Element {
     content.style.maxHeight = this.height || "";
   }
 
+  _setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
+    items.forEach(item => {
+      item.mode = this.mode;
+      item.controlled = this.isControlled;
+    });
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
     return hasTextProperty ? this.noResultText : this.noMatchesFoundText;
@@ -581,7 +570,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get selectedItems(): Array<UDExListItemBase> {
-    return this.getSlottedItems(this.items).filter(({ selected }) => selected);
+    const selectedItems: Array<UDExListItemBase> = this.getSlottedItems(this.items).filter(({ selected }) => selected);
+    return selectedItems;
   }
 
   get modeMultiSelect(): boolean {
@@ -611,7 +601,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get showSearch(): boolean {
-    return this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+    const isSearchVisible = this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+    return !this.hideDropdownSearch && isSearchVisible;
   }
 
   get isSearchActive(): boolean {
@@ -641,6 +632,10 @@ class UDExSearchableListBase extends UI5Element {
 
     return "none";
   }
+
+  get hideDropdownSearch(): boolean {
+    return false;
+  }
 }
 
 export default UDExSearchableListBase;