prevent search/cart link navigation when JS modal is active
Some checks failed
deploy / deploy (push) Has been cancelled

Without JS the header icons are plain <a> links to /search and /cart.
With LiveView connected, the hooks now preventDefault on those links
so only the modal/drawer opens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-25 01:07:51 +00:00
parent d0ea9d59f5
commit a61adf4939

View File

@ -73,6 +73,13 @@ const CartDrawer = {
this.scrollY = 0 this.scrollY = 0
this.isOpen = this.el.classList.contains('open') this.isOpen = this.el.classList.contains('open')
// Prevent the cart link from navigating when the drawer is available
this._cartTrigger = document.querySelector('a[aria-label="Cart"]')
if (this._cartTrigger) {
this._preventNav = (e) => e.preventDefault()
this._cartTrigger.addEventListener("click", this._preventNav)
}
if (this.isOpen) { if (this.isOpen) {
this.lockScroll() this.lockScroll()
document.addEventListener('keydown', this.boundKeydown) document.addEventListener('keydown', this.boundKeydown)
@ -187,6 +194,9 @@ const CartDrawer = {
destroyed() { destroyed() {
document.removeEventListener('keydown', this.boundKeydown) document.removeEventListener('keydown', this.boundKeydown)
document.removeEventListener('touchmove', this.boundTouchmove) document.removeEventListener('touchmove', this.boundTouchmove)
if (this._cartTrigger && this._preventNav) {
this._cartTrigger.removeEventListener("click", this._preventNav)
}
document.body.style.position = '' document.body.style.position = ''
document.body.style.top = '' document.body.style.top = ''
document.body.style.left = '' document.body.style.left = ''
@ -355,6 +365,13 @@ const SearchModal = {
} }
document.addEventListener("keydown", this._globalKeydown) document.addEventListener("keydown", this._globalKeydown)
// Prevent the search trigger link from navigating when the modal is available
this._searchTrigger = document.querySelector('a[aria-label="Search"]')
if (this._searchTrigger) {
this._preventNav = (e) => e.preventDefault()
this._searchTrigger.addEventListener("click", this._preventNav)
}
this.el.addEventListener("open-search", () => this.open()) this.el.addEventListener("open-search", () => this.open())
this.el.addEventListener("close-search", () => this.close()) this.el.addEventListener("close-search", () => this.close())
@ -384,6 +401,9 @@ const SearchModal = {
destroyed() { destroyed() {
document.removeEventListener("keydown", this._globalKeydown) document.removeEventListener("keydown", this._globalKeydown)
if (this._searchTrigger && this._preventNav) {
this._searchTrigger.removeEventListener("click", this._preventNav)
}
}, },
updated() { updated() {