From 94aa47eef5adab56ed6b9a17036080dc8862fe55 Mon Sep 17 00:00:00 2001 From: Maximilian Koeller Date: Wed, 6 May 2026 10:07:36 +0200 Subject: [PATCH] feat(search-bar): add maxlength input to limit search input length Adds a maxlength input to the SiSearchBarComponent that allows consumers to define the maximum length of the search input field. --- api-goldens/element-ng/search-bar/index.api.md | 1 + .../element-ng/search-bar/si-search-bar.component.html | 1 + projects/element-ng/search-bar/si-search-bar.component.ts | 7 +++++++ 3 files changed, 9 insertions(+) diff --git a/api-goldens/element-ng/search-bar/index.api.md b/api-goldens/element-ng/search-bar/index.api.md index 70f59a806b..039794da00 100644 --- a/api-goldens/element-ng/search-bar/index.api.md +++ b/api-goldens/element-ng/search-bar/index.api.md @@ -20,6 +20,7 @@ export class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAcce readonly debounceTime: _angular_core.InputSignalWithTransform; // (undocumented) readonly disabledInput: _angular_core.InputSignalWithTransform; + readonly maxlength: _angular_core.InputSignalWithTransform; readonly placeholder: _angular_core.InputSignal; readonly prohibitedCharacters: _angular_core.InputSignal; // (undocumented) diff --git a/projects/element-ng/search-bar/si-search-bar.component.html b/projects/element-ng/search-bar/si-search-bar.component.html index 780c6551a6..36f46bd5f8 100644 --- a/projects/element-ng/search-bar/si-search-bar.component.html +++ b/projects/element-ng/search-bar/si-search-bar.component.html @@ -13,6 +13,7 @@ [class.is-invalid]="isInvalid" [class.icon-end]="searchValue()" [attr.tabindex]="tabbable() ? '' : '-1'" + [attr.maxlength]="maxlength()" [readonly]="readonly()" (focus)="inFocus = true" (blur)="onBlur()" diff --git a/projects/element-ng/search-bar/si-search-bar.component.ts b/projects/element-ng/search-bar/si-search-bar.component.ts index 43fb14a874..e49309a906 100644 --- a/projects/element-ng/search-bar/si-search-bar.component.ts +++ b/projects/element-ng/search-bar/si-search-bar.component.ts @@ -96,6 +96,13 @@ export class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAcce // eslint-disable-next-line @angular-eslint/no-input-rename readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute }); + /** + * Defines the maximum length of the search input. + * + * @defaultValue undefined + */ + readonly maxlength = input(undefined, { transform: numberAttribute }); + /** * Aria label for the clear button. *