Revert "UX: header search mobile support - follow up (#32306)"

yuriyaran · yuriyaran · commit 44bb733b0867 · 2025-05-15T16:41:44.000+08:00
This reverts commit ff334fd.
diff --git a/app/assets/javascripts/discourse/app/components/header.gjs b/app/assets/javascripts/discourse/app/components/header.gjs
@@ -116,7 +116,6 @@ export default class GlimmerHeader extends Component {
   handleAnimationComplete() {
     this.hasClosingAnimation = false;
     this.search.visible = false;
-    this.toggleBodyScrolling(false);
   }
 
   @action
@@ -170,11 +169,9 @@ export default class GlimmerHeader extends Component {
     }
 
     if (this.site.mobileView && this.search.visible) {
-      // hide is delayed for the duration of `search-slide-out` animation
       this.hasClosingAnimation = true;
     } else {
       this.search.visible = !this.search.visible;
-      this.toggleBodyScrolling(true);
     }
 
     if (!this.search.visible) {
diff --git a/app/assets/javascripts/discourse/app/components/search-menu.gjs b/app/assets/javascripts/discourse/app/components/search-menu.gjs
@@ -188,7 +188,9 @@ export default class SearchMenu extends Component {
   }
 
   @bind
-  clearSearch() {
+  clearSearch(e) {
+    e.stopPropagation();
+    e.preventDefault();
     this.search.activeGlobalSearchTerm = "";
     this.search.focusSearchInput();
     this.triggerSearch();
@@ -469,8 +471,8 @@ export default class SearchMenu extends Component {
           <DButton
             @action={{this.cancelMobileSearch}}
             @translatedLabel={{i18n "cancel_value"}}
-            class="btn-flat btn-cancel-mobile-search"
-            data-test-button="cancel-mobile-search"
+            class="btn-flat"
+            data-test-button="cancel-search-mobile"
           />
         {{/if}}
       </div>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
@@ -3,7 +3,7 @@ import { i18n } from "discourse-i18n";
 
 <template>
   <DButton
-    class="btn-transparent show-advanced-search"
+    class="show-advanced-search btn-transparent"
     data-test-button="show-advanced-search"
     title={{i18n "search.open_advanced"}}
     @action={{@openAdvancedSearch}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
@@ -1,13 +1,16 @@
-import DButton from "discourse/components/d-button";
+import { on } from "@ember/modifier";
+import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 <template>
-  <DButton
-    class="btn-transparent clear-search"
-    data-test-button="clear-search-input"
+  <a
+    class="clear-search"
+    data-test-anchor="clear-search-input"
     aria-label="clear_input"
     title={{i18n "search.clear_search"}}
-    @action={{@clearSearch}}
-    @icon="xmark"
-  />
+    href
+    {{on "click" @clearSearch}}
+  >
+    {{icon "xmark"}}
+  </a>
 </template>
diff --git a/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js b/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
@@ -15,7 +15,7 @@ export default modifier(
   (
     element,
     posArgs,
-    { animate = false, onComplete = () => {}, elementSelector, delay = 200 }
+    { animate = false, onComplete = () => {}, elementSelector, delay = 300 }
   ) => {
     if (animate) {
       const targetEl = elementSelector
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
@@ -52,7 +52,7 @@ acceptance("Search - Mobile", function (needs) {
         "search results are listed on search value present"
       );
 
-      await click('[data-test-button="clear-search-input"]');
+      await click('[data-test-anchor="clear-search-input"]');
 
       assert
         .dom('[data-test-selector="search-menu-results"]')
@@ -64,7 +64,7 @@ acceptance("Search - Mobile", function (needs) {
     test("with empty input search", async function (assert) {
       await visit("/");
       await click("#search-button");
-      await click('[data-test-button="cancel-mobile-search"]');
+      await click('[data-test-button="cancel-search-mobile"]');
 
       assert
         .dom('[data-test-selector="menu-panel"]')
@@ -82,7 +82,7 @@ acceptance("Search - Mobile", function (needs) {
         "search results are listed on search value present"
       );
 
-      await click('[data-test-button="cancel-mobile-search"]');
+      await click('[data-test-button="cancel-search-mobile"]');
       await click("#search-button");
 
       assert.dom('[data-test-input="search-term"]').hasNoValue();
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -244,44 +244,36 @@
     &.search-menu-panel {
       width: 100vw;
       max-width: 100vw;
-      padding: 0;
-      transform-origin: 66%;
-      transition: height 0.2s ease-in;
 
       &.empty-panel {
-        height: 4rem;
+        height: auto;
       }
 
       &.slide-in {
-        animation: search-slide-in 0.2s ease-out forwards;
+        animation: search-slidein 0.3s ease-out forwards;
       }
 
       &.is-destroying {
-        animation: search-slide-out 0.2s ease-in forwards;
+        animation: search-slideout 0.3s ease-in forwards;
       }
 
-      @keyframes search-slide-in {
+      @keyframes search-slidein {
         from {
           opacity: 0;
-          transform: scaleX(0);
+          transform: translateY(-100%);
         }
       }
 
-      @keyframes search-slide-out {
-        from {
-          transform: scaleX(1);
+      @keyframes search-slideout {
+        80% {
           opacity: 1;
         }
 
-        to {
+        100% {
           opacity: 0;
-          transform: scaleX(0);
+          transform: translateY(-100%);
         }
       }
-
-      .btn-cancel-mobile-search {
-        align-self: stretch;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/components/header-search.scss b/app/assets/stylesheets/desktop/components/header-search.scss
@@ -74,7 +74,7 @@
             justify-content: flex-end;
 
             .show-advanced-search,
-            .clear-search {
+            a.clear-search {
               display: inline-flex;
               align-items: center;
             }

Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,6 @@ export default class GlimmerHeader extends Component {`
`116`	`116`	`handleAnimationComplete() {`
`117`	`117`	`this.hasClosingAnimation = false;`
`118`	`118`	`this.search.visible = false;`
`119`		`- this.toggleBodyScrolling(false);`
`120`	`119`	`}`
`121`	`120`
`122`	`121`	`@action`
`@@ -170,11 +169,9 @@ export default class GlimmerHeader extends Component {`
`170`	`169`	`}`
`171`	`170`
`172`	`171`	`if (this.site.mobileView && this.search.visible) {`
`173`		- // hide is delayed for the duration of `search-slide-out` animation
`174`	`172`	`this.hasClosingAnimation = true;`
`175`	`173`	`} else {`
`176`	`174`	`this.search.visible = !this.search.visible;`
`177`		`- this.toggleBodyScrolling(true);`
`178`	`175`	`}`
`179`	`176`
`180`	`177`	`if (!this.search.visible) {`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export default modifier(`
`15`	`15`	`(`
`16`	`16`	`element,`
`17`	`17`	`posArgs,`
`18`		`- { animate = false, onComplete = () => {}, elementSelector, delay = 200 }`
	`18`	`+ { animate = false, onComplete = () => {}, elementSelector, delay = 300 }`
`19`	`19`	`) => {`
`20`	`20`	`if (animate) {`
`21`	`21`	`const targetEl = elementSelector`
Original file line number	Diff line number	Diff line change
`@@ -244,44 +244,36 @@`
`244`	`244`	`&.search-menu-panel {`
`245`	`245`	`width: 100vw;`
`246`	`246`	`max-width: 100vw;`
`247`		`- padding: 0;`
`248`		`- transform-origin: 66%;`
`249`		`- transition: height 0.2s ease-in;`
`250`	`247`
`251`	`248`	`&.empty-panel {`
`252`		`- height: 4rem;`
	`249`	`+ height: auto;`
`253`	`250`	`}`
`254`	`251`
`255`	`252`	`&.slide-in {`
`256`		`- animation: search-slide-in 0.2s ease-out forwards;`
	`253`	`+ animation: search-slidein 0.3s ease-out forwards;`
`257`	`254`	`}`
`258`	`255`
`259`	`256`	`&.is-destroying {`
`260`		`- animation: search-slide-out 0.2s ease-in forwards;`
	`257`	`+ animation: search-slideout 0.3s ease-in forwards;`
`261`	`258`	`}`
`262`	`259`
`263`		`- @keyframes search-slide-in {`
	`260`	`+ @keyframes search-slidein {`
`264`	`261`	`from {`
`265`	`262`	`opacity: 0;`
`266`		`- transform: scaleX(0);`
	`263`	`+ transform: translateY(-100%);`
`267`	`264`	`}`
`268`	`265`	`}`
`269`	`266`
`270`		`- @keyframes search-slide-out {`
`271`		`- from {`
`272`		`- transform: scaleX(1);`
	`267`	`+ @keyframes search-slideout {`
	`268`	`+ 80% {`
`273`	`269`	`opacity: 1;`
`274`	`270`	`}`
`275`	`271`
`276`		`- to {`
	`272`	`+ 100% {`
`277`	`273`	`opacity: 0;`
`278`		`- transform: scaleX(0);`
	`274`	`+ transform: translateY(-100%);`
`279`	`275`	`}`
`280`	`276`	`}`
`281`		`-`
`282`		`- .btn-cancel-mobile-search {`
`283`		`- align-self: stretch;`
`284`		`- }`
`285`	`277`	`}`
`286`	`278`	`}`
`287`	`279`	`}`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@`
`74`	`74`	`justify-content: flex-end;`
`75`	`75`
`76`	`76`	`.show-advanced-search,`
`77`		`- .clear-search {`
	`77`	`+ a.clear-search {`
`78`	`78`	`display: inline-flex;`
`79`	`79`	`align-items: center;`
`80`	`80`	`}`