Fix clear button flickering on page load

opf · Sep 9, 2024 · 06ca3d9 · 06ca3d9
1 parent f4f7ec4
commit 06ca3d9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/app/components/primer/open_project/sub_header.pcss b/app/components/primer/open_project/sub_header.pcss
@@ -41,3 +41,7 @@
     width: 100%;
     gap: 8px;
 }
+
+.SubHeader-filterInput_hiddenClearButton + button.FormControl-input-trailingAction {
+  display: none;
+}
diff --git a/app/components/primer/open_project/sub_header.rb b/app/components/primer/open_project/sub_header.rb
@@ -38,7 +38,7 @@ class SubHeader < Primer::Component
       renders_one :filter_input, lambda { |name:, label:, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
-          "SubHeader-filterInput"
+          "SubHeader-filterInput SubHeader-filterInput_hiddenClearButton"
         )
         system_arguments[:placeholder] ||= I18n.t("button_filter")
         system_arguments[:leading_visual] ||= { icon: :search }

diff --git a/app/components/primer/open_project/sub_header_element.ts b/app/components/primer/open_project/sub_header_element.ts
@@ -53,6 +53,7 @@ class SubHeaderElement extends HTMLElement {
     this.waitForCondition(
       () => Boolean(this.filterInput),
       () => {
+        this.filterInput.classList.remove('SubHeader-filterInput_hiddenClearButton')
         this.clearFilterButton = this.querySelector('button.FormControl-input-trailingAction') as HTMLButtonElement
 
         if (this.clearFilterButton) {