Add focus effect when search modal is opened

src/components/hy-search-field/hy-search-field.scss

@@ -44,6 +44,7 @@
   @include font-size(14px, 24px);
   border-radius: 0;
   border: 1px solid var(--grayscale-medium-dark);
+  caret-color: var(--brand-main-light);
   font-weight: bold;
   height: 40px;
   letter-spacing: normal;
@@ -78,7 +79,6 @@
     border-style: solid inset solid solid;
     border-width: 2px;
     outline: 0;
-    text-indent: -1px; // Text stays in place.
   }
 }
 

src/components/site-header/site-search/site-search.tsx

@@ -100,9 +100,11 @@ export class SiteSearch {
       const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
       searchPanel.style.top = headerHeight;
 
-      // @todo add blinking effect.
-      const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
-      searchInput.focus();
+      // Without setTimeout it will not focus the input because it hasn't rendered yet.
+      setTimeout(() => {
+        const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
+        searchInput.focus();
+      });
     }
     event.stopPropagation();
   }