+
@if (expandable && !isSearchBarActive()) {
}
-
+
@if (label) {
{{ label }}
}
diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss
index 3d3d36bea5..79a2332962 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.scss
+++ b/lib/core/src/lib/search-text/search-text-input.component.scss
@@ -6,12 +6,19 @@
.adf-search-container-transition {
display: flex;
align-items: center;
+ }
+
+ .adf-input-form-field-divider {
transition:
transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
margin-left 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
margin-right 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
+ .adf-search-no-animation .adf-input-form-field-divider {
+ transition: none;
+ }
+
.adf {
&-search-fixed-text {
line-height: normal;
diff --git a/lib/core/src/lib/search-text/search-text-input.component.spec.ts b/lib/core/src/lib/search-text/search-text-input.component.spec.ts
index 81a17e603f..bffa224315 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.spec.ts
+++ b/lib/core/src/lib/search-text/search-text-input.component.spec.ts
@@ -145,6 +145,13 @@ describe('SearchTextInputComponent', () => {
fixture.detectChanges();
});
+ it('should disable transitions when disableAnimations is true', () => {
+ component.disableAnimations = true;
+ fixture.detectChanges();
+
+ expect(testingUtils.getByCSS('.adf-search-container-transition.adf-search-no-animation')).toBeTruthy();
+ });
+
/**
* function which finds Search Button and clicks it
*/
diff --git a/lib/core/src/lib/search-text/search-text-input.component.ts b/lib/core/src/lib/search-text/search-text-input.component.ts
index 4d4530efba..533caec222 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.ts
+++ b/lib/core/src/lib/search-text/search-text-input.component.ts
@@ -103,6 +103,10 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
@Input()
collapseOnBlur: boolean = true;
+ /** Disables expand/collapse transitions while keeping state changes functional. */
+ @Input()
+ disableAnimations: boolean = false;
+
/** Toggles whether to show a clear button that closes the search */
@Input()
showClearButton: boolean = false;