diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js index 2083a11d92ceae856d6208b1441e6d027c2cbb28..3eb82f8322ce0b342ac2346f1b4da3215c9f86b6 100644 --- a/assets/js/theme/design-system/search.js +++ b/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'; diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass index 756a2d68283761505359048108b1bf8c1d19babf..2089d2e3ae080e5fa303e79ab26d79a0ccf054c0 100644 --- a/assets/sass/_theme/design-system/search.sass +++ b/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 diff --git a/yarn.lock b/yarn.lock index e214c0e099ea19af6e74b1c68177177bbf3ed389..13c69f76a81f759101d90ea899c26ed996ff4710 100644 --- a/yarn.lock +++ b/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"