autofocus

assets/js/theme/design-system/search.js

@@ -3,7 +3,6 @@ class Search {
         this.button = button;
         this.element = document.querySelector('.search__modal');
         this.closeButton = this.element.querySelector('.search__close');
-        // this.searchContent = this.element.querySelector('.pagefind-ui__drawer');
 
         if (!this.element) {
             return;
@@ -16,9 +15,9 @@ class Search {
     }
 
     listen() {
+        
         this.button.addEventListener('click', () => {
-            this.toggle(true);
-            this.closeButton.focus();        
+            this.toggle(true);      
             this.removedItems = this.element.querySelector('.pagefind-ui__suppressed', '.pagefind-ui__search-clear');
             if (this.removedItems) {
                 this.removedItems.remove();
@@ -26,10 +25,7 @@ class Search {
         });
         this.closeButton.addEventListener('click', () => {
             this.element.querySelector('form').reset();
-            this.element.querySelector('input').blur();
-            // this.searchContent.classList.add('pagefind-ui__hidden');
             this.toggle(false);
-            this.button.focus();
         });
 
         window.addEventListener('keydown', (event) => {
@@ -67,7 +63,11 @@ class Search {
         this.state.isOpened = open;
         this.element.setAttribute('aria-hidden', !this.state.isOpened);
         this.button.setAttribute('aria-expanded', this.state.isOpened);
+
         if (open) {
+            this.input = this.element.querySelector('input');
+            this.input.focus();
+
             document.body.style.overflow = 'hidden';
         } else {
             document.body.style.overflow = 'unset';

assets/sass/_theme/design-system/search.sass

@@ -10,8 +10,8 @@
     padding: half($spacing0) $spacing0
     text-align: left
     &::after
-        line-height: inherit
         font-size: $body-size-desktop
+        line-height: inherit
         margin-left: px2rem(8)
     @include media-breakpoint-down(md)
         border-bottom: 1px solid #adb5bd
@@ -62,7 +62,9 @@
                 align-items: center
                 display: flex
                 height: half($spacing3)
+                padding-right: px2rem(2)
                 position: absolute
+                pointer-events: none
                 right: 0
                 top: 0
                 z-index: 7

yarn.lock

@@ -83,9 +83,9 @@ interpret@^1.0.0:
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
 intersection-observer@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
-  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
+  integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
 
 is-core-module@^2.13.0:
   version "2.13.0"