Disable transition if search is opened by keyboard

tailwindlabs · Jun 21, 2024 · ac92181 · ac92181
1 parent 7d971e6
commit ac92181
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -27,17 +27,23 @@ export function SearchProvider({ children }) {
   const [isOpen, setIsOpen] = useState(false)
   const [initialQuery, setInitialQuery] = useState(null)
 
-  const onOpen = useCallback(() => {
-    startViewTransition(() => {
-      setIsOpen(true)
-    })
-  }, [setIsOpen])
+  const onOpen = useCallback(
+    (keyboardActivated = false) => {
+      startViewTransition(() => {
+        setIsOpen(true)
+      }, keyboardActivated)
+    },
+    [setIsOpen]
+  )
 
-  const onClose = useCallback(() => {
-    startViewTransition(() => {
-      setIsOpen(false)
-    })
-  }, [setIsOpen])
+  const onClose = useCallback(
+    (keyboardActivated = false) => {
+      startViewTransition(() => {
+        setIsOpen(false)
+      }, keyboardActivated)
+    },
+    [setIsOpen]
+  )
 
   const onInput = useCallback(
     (e) => {
@@ -120,7 +126,7 @@ export function SearchProvider({ children }) {
                 ],
               }}
               placeholder="Search documentation"
-              onClose={onClose}
+              onClose={() => void onClose()}
               indexName={INDEX_NAME}
               apiKey={API_KEY}
               appId={APP_ID}
@@ -231,7 +237,7 @@ export function SearchButton({ children, className = '', ...props }) {
         isOpen && 'supports-view-transitions:motion-safe:invisible'
       )}
       ref={searchButtonRef}
-      onClick={onOpen}
+      onClick={() => void onOpen()}
       style={{ viewTransitionName: isOpen ? null : 'search-box' }}
       {...props}
     >
@@ -300,7 +306,7 @@ function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) {
         // We check that no other DocSearch modal is showing before opening
         // another one.
         if (!document.body.classList.contains('DocSearch--active')) {
-          onOpen()
+          onOpen(true)
         }
       }
 
@@ -312,7 +318,7 @@ function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) {
         event.preventDefault()
 
         if (isOpen) {
-          onClose()
+          onClose(true)
         } else if (!document.body.classList.contains('DocSearch--active')) {
           open()
         }

diff --git a/src/utils/startViewTransition.js b/src/utils/startViewTransition.js
@@ -7,8 +7,8 @@ const motionSafe =
     ? window.matchMedia('(prefers-reduced-motion: no-preference)')
     : undefined
 
-export function startViewTransition(cb) {
-  if (motionSafe?.matches && typeof document?.startViewTransition === 'function') {
+export function startViewTransition(cb, disabled = false) {
+  if (!disabled && motionSafe?.matches && typeof document?.startViewTransition === 'function') {
     document.startViewTransition(() => {
       flushSync(cb)
     })