Skip to content

feat(ui5-search): add new property fieldLoading #12847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dobrinyonkov wants to merge 2 commits into from
Closed

feat(ui5-search): add new property fieldLoading #12847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
236a0c6
feat(ui5-search): add new property fieldLoading
dobrinyonkov Dec 10, 2025
6200f78
Merge branch 'main' into search-field-loading-prop-absolute
ilhan007 Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/fiori/src/SearchField.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ class SearchField extends UI5Element {
"scope-change": SearchFieldScopeSelectionChangeDetails,
}

/**
* Indicates whether a loading indicator should be shown in the input field.
* @default false
* @since 2.18.0
* @public
*/
@property({ type: Boolean })
fieldLoading = false

/**
* Defines whether the clear icon of the search will be shown.
* @default false
Expand Down
11 changes: 10 additions & 1 deletion packages/fiori/src/SearchFieldTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type SearchField from "./SearchField.js";
import decline from "@ui5/webcomponents-icons/dist/decline.js";
import search from "@ui5/webcomponents-icons/dist/search.js";
import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";

export type SearchFieldTemplateOptions = {
/**
Expand All @@ -20,6 +21,7 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
<Button
class="ui5-shell-search-field-button"
icon={search}
loading={this.fieldLoading}
design={ButtonDesign.Transparent}
data-sap-focus-ref
onClick={this._handleSearchIconPress}
Expand All @@ -29,10 +31,15 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
></Button>
) : (
<div class="ui5-search-field-root" role="search" onFocusOut={this._onFocusOutSearch}>
<div class="ui5-search-field-content">
<div class="search-field-busy-wrapper">
<BusyIndicator inert class="search-field-busy-indicator" active={this.fieldLoading}></BusyIndicator>
</div>
<div class="ui5-search-field-content"
>
{this.scopes?.length ? (
<>
<Select
inert={this.fieldLoading}
onChange={this._handleScopeChange}
class="sapUiSizeCompact ui5-search-field-select"
accessibleName={this._translations.scope}
Expand Down Expand Up @@ -62,6 +69,8 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
<input
class="ui5-search-field-inner-input"
role="searchbox"
readonly={this.fieldLoading}
aria-busy={this.fieldLoading ? "true" : undefined}
aria-description={this.accessibleDescription}
aria-label={this.accessibleName || this._translations.searchFieldAriaLabel}
aria-autocomplete="both"
Expand Down
4 changes: 4 additions & 0 deletions packages/fiori/src/themes/Search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
margin-bottom: .5rem;
}

.search-field-busy-wrapper,
.search-popover-busy-wrapper {
position: absolute;
left: 50%;
Expand All @@ -75,16 +76,19 @@
pointer-events: all;
}

:host([field-loading]) .search-field-busy-wrapper,
:host([loading]) .search-popover-busy-wrapper {
display: flex;
width: 100%;
height: 100%;
}

.search-field-busy-wrapper [ui5-busy-indicator],
.search-popover-busy-wrapper [ui5-busy-indicator] {
z-index: 1;
}

.search-field-busy-wrapper::after,
.search-popover-busy-wrapper::after {
content: "";
position: absolute;
Expand Down
36 changes: 19 additions & 17 deletions packages/fiori/test/pages/Search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<body class="search sapUiSizeCompact" style="background-color: var(--sapBackgroundColor);">

<ui5-search>
<ui5-search field-loading>
<ui5-search-message-area slot="messageArea" description="Search for example “All my open Objects”" text="Try This!"></ui5-search-message-area>

<ui5-search-item text="List Item 1"></ui5-search-item>
Expand All @@ -44,7 +44,7 @@

<div class="container first">
<ui5-label>Search with Suggestions - Example No Results, but suggestions</ui5-label>
<ui5-search show-clear-icon>
<ui5-search show-clear-icon field-loading>
<ui5-search-message-area slot="messageArea" description="You can try the following" text="Oh, there are no results"></ui5-search-message-area>

<ui5-search-item text="List Item Deletable" icon="history" deletable></ui5-search-item>
Expand All @@ -58,7 +58,7 @@
</div>

<ui5-label>Search with Grouped Suggestions and Show More (N) Item</ui5-label>
<ui5-search id="searchShowMore" show-clear-icon placeholder="Placeholder">
<ui5-search id="searchShowMore" show-clear-icon placeholder="Placeholder" field-loading>
<ui5-search-message-area slot="messageArea" description="You can try the following"
text="Oh, there are no results"></ui5-search-message-area>
<ui5-search-item-group id="group1" header-text="Group Header">
Expand Down Expand Up @@ -138,27 +138,29 @@
<div class="container">
<ui5-label>Search - Initially collapsed with Busy State</ui5-label>
<div class="container" style="border: 1px solid black; display: flex; padding: 4px; justify-content: flex-end;">
<ui5-search id="expanding" loading collapsed></ui5-search>
<ui5-search id="expanding" field-loading loading collapsed></ui5-search>
</div>
</div>

<div class="container">
<ui5-label>Search with Illustation Message - Example of no results, no suggestions</ui5-label>
<ui5-search show-clear-icon loading>
<ui5-search-message-area slot="messageArea" description="Search for example “All my open Objects”" text="Try This!"></ui5-search-message-area>

<ui5-illustrated-message slot="illustration">
<ui5-title slot="title" level="H1">Oh, there are no results</ui5-title>
<div slot="subtitle">Change your search query</div>
</ui5-illustrated-message>

<ui5-button design="Transparent" slot="action">Search in other domains</ui5-button>
</ui5-search>
<ui5-busy-indicator active>
<ui5-search show-clear-icon loading>
<ui5-search-message-area slot="messageArea" description="Search for example “All my open Objects”" text="Try This!"></ui5-search-message-area>

<ui5-illustrated-message slot="illustration">
<ui5-title slot="title" level="H1">Oh, there are no results</ui5-title>
<div slot="subtitle">Change your search query</div>
</ui5-illustrated-message>

<ui5-button design="Transparent" slot="action">Search in other domains</ui5-button>
</ui5-search>
</ui5-busy-indicator>
</div>

<div class="container">
<ui5-label>Search with Grouped Suggestions and Show More Button</ui5-label>
<ui5-search id="search" show-clear-icon placeholder="Placeholder">
<ui5-search field-loading id="search" show-clear-icon placeholder="Placeholder">
<ui5-button design="Transparent" slot="action">Show all search results [N]</ui5-button>

<ui5-search-message-area slot="messageArea" description="You can try the following" text="Oh, there are no results"></ui5-search-message-area>
Expand Down Expand Up @@ -235,7 +237,7 @@
<div class="container">
<ui5-label>Byline items</ui5-label>
<br />
<ui5-search show-clear-icon>
<ui5-search show-clear-icon loading>
<ui5-search-item-group header-text="Suppliers (4)">
<ui5-search-item text="Danish Fishing Trading Company (100000043)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
<ui5-search-item text="Daily Update Ltd. (290210057)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
Expand All @@ -255,7 +257,7 @@

<div class="container last" style="padding-top: 1rem;">
<ui5-label>Search with lazy loaded Suggestions - Autocomplete and highlighting</ui5-label>
<ui5-search id="search-lazy" show-clear-icon placeholder="Type 'a'..."></ui5-search>
<ui5-search loading id="search-lazy" show-clear-icon placeholder="Type 'a'..."></ui5-search>
</div>

<script>
Expand Down
Loading