From 06ca3d9e1b45785599aa84593a8ade53c8a17f3d Mon Sep 17 00:00:00 2001
From: Dombi Attila <83396+dombesz@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:07:42 +0300
Subject: [PATCH] Fix clear button flickering on page load

---
 app/components/primer/open_project/sub_header.pcss       | 4 ++++
 app/components/primer/open_project/sub_header.rb         | 2 +-
 app/components/primer/open_project/sub_header_element.ts | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/primer/open_project/sub_header.pcss b/app/components/primer/open_project/sub_header.pcss
index d1cd410874..93bb188c6e 100644
--- 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
index 3c46e602a3..9ebea2e507 100644
--- 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
index dfe1f5fc6b..8919ebd388 100644
--- 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) {