From 3f2c767d438903d9d2b245536dc9d9bd730ce381 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 24 Jul 2026 11:49:43 +0100
Subject: [PATCH] chore(search): add disableAnimations input and update styles
 for search button transitions (#12087)

---
 .../src/lib/search-text/search-text-input.component.html   | 4 ++--
 .../src/lib/search-text/search-text-input.component.scss   | 7 +++++++
 .../lib/search-text/search-text-input.component.spec.ts    | 7 +++++++
 .../src/lib/search-text/search-text-input.component.ts     | 4 ++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/lib/search-text/search-text-input.component.html b/lib/core/src/lib/search-text/search-text-input.component.html
index 718382a98f..dd980f98e9 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.html
+++ b/lib/core/src/lib/search-text/search-text-input.component.html
@@ -1,5 +1,5 @@
 <div class="adf-search-container" [attr.state]="subscriptAnimationState.value">
-    <div class="adf-search-container-transition" [class.adf-search-active]="isSearchBarActive()" [ngStyle]="subscriptAnimationState.params">
+    <div class="adf-search-container-transition" [class.adf-search-active]="isSearchBarActive()" [class.adf-search-no-animation]="disableAnimations">
         @if (expandable && !isSearchBarActive()) {
             <button
                 mat-icon-button
@@ -13,7 +13,7 @@
                 <mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate" adf-icon="search" />
             </button>
         }
-        <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
+        <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel" [ngStyle]="subscriptAnimationState.params">
             @if (label) {
                 <mat-label>{{ label }}</mat-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;