From 04786857919e7ab1bfe5e4259d44352ccb6c567f Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Fri, 14 Jun 2024 16:06:34 +0000
Subject: [PATCH] fix: prevent searchbox hover animation conflicts with delay
 (#34)

---
 assets/css/document.css | 12 ++++--------
 assets/js/document.js   | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/assets/css/document.css b/assets/css/document.css
index c7372c7..dc612cd 100755
--- a/assets/css/document.css
+++ b/assets/css/document.css
@@ -57,10 +57,6 @@ body[vv-page]::before {
 	opacity: 1;
 }
 
-body.search-dialog-open {
-	overflow: hidden;
-}
-
 a {
     display: contents;
     color: inherit;
@@ -168,8 +164,10 @@ header > * {
 
 /* enable 3d flip animation */
 @media not (prefers-reduced-motion: reduce) {
-	header > * {	
-		transition: 600ms transform, 300ms background-color;
+	header > * {
+		--transform-duration: 600ms;
+
+		transition: var(--transform-duration) transform, 300ms background-color;
 	}
 }
 
@@ -252,12 +250,10 @@ header searchbox input {
 
 header.searchboxActive > * {
 	transform: rotateX(-180deg);
-	pointer-events: none;
 }
 
 header.searchboxActive searchbox {
 	transform: rotateX(0);
-	pointer-events: all;
 }
 
 /* ## Main */
diff --git a/assets/js/document.js b/assets/js/document.js
index 0c9c39a..829f2bb 100755
--- a/assets/js/document.js
+++ b/assets/js/document.js
@@ -1,6 +1,17 @@
 new vv.Interactions("document", {
 	navigateHome: () => new vv.Navigation("/").navigate(),
-	closeSearchbox: () => document.querySelector("header").classList.remove("searchboxActive"),
+	closeSearchbox: () => {
+		// Disable search button interaction while animation is running
+		// This is required to prevent conflicts with the :hover "peak" transformation
+		const searchButtonElement = document.querySelector("header button.search");
+		const transformDuration = parseInt(window.getComputedStyle(searchButtonElement).getPropertyValue("--transform-duration"));
+		searchButtonElement.style.setProperty("pointer-events", "none");
+
+		document.querySelector("header").classList.remove("searchboxActive");
+
+		// Wait for the transform animation to finish
+		setTimeout(() => searchButtonElement.style.removeProperty("pointer-events"), transformDuration);
+	},
 	openSearchbox: () => {
 		document.querySelector("header").classList.add("searchboxActive");
 		// Select searchbox inner input element