[v3] fix page scroll jump while entering characters in the search input (#2984)

aa

Author: Dimitri POSTOLOV

.changeset/hot-readers-sell.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+fix page scroll jump while entering characters in the search input

.eslintrc.cjs

@@ -62,6 +62,8 @@ module.exports = {
         'prefer-const': ['error', { destructuring: 'all' }],
         'unicorn/prefer-array-index-of': 'error',
         'sonarjs/no-unused-collection': 'error',
+        'unicorn/catch-error-name': 'error',
+        'unicorn/prefer-optional-catch-binding': 'error',
         // todo: enable
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',

packages/nextra-theme-docs/src/components/flexsearch.tsx

@@ -244,35 +244,20 @@ export function Flexsearch({
     )
   }
 
-  const preload = useCallback(
-    async (active: boolean) => {
-      if (active && !indexes[locale]) {
-        setLoading(true)
-        try {
-          await loadIndexes(basePath, locale)
-        } catch (e) {
-          setError(true)
-        }
-        setLoading(false)
-      }
-    },
-    [locale, basePath]
-  )
+  const preload = useCallback(async () => {
+    if (indexes[locale]) return
+    setLoading(true)
+    try {
+      await loadIndexes(basePath, locale)
+    } catch {
+      setError(true)
+    }
+    setLoading(false)
+  }, [locale, basePath])
 
-  const handleChange = async (value: string) => {
+  const handleChange = (value: string) => {
     setSearch(value)
-    if (loading) {
-      return
-    }
-    if (!indexes[locale]) {
-      setLoading(true)
-      try {
-        await loadIndexes(basePath, locale)
-      } catch (e) {
-        setError(true)
-      }
-      setLoading(false)
-    }
+    if (loading) return
     doSearch(value)
   }
 

packages/nextra-theme-docs/src/components/search.tsx

@@ -5,7 +5,12 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useMounted } from 'nextra/hooks'
 import { InformationCircleIcon, SpinnerIcon } from 'nextra/icons'
-import type { CompositionEvent, KeyboardEvent, ReactElement } from 'react'
+import type {
+  CompositionEvent,
+  FocusEventHandler,
+  KeyboardEvent,
+  ReactElement
+} from 'react'
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { useMenu, useThemeConfig } from '../contexts'
 import type { SearchResult } from '../types'
@@ -17,7 +22,7 @@ type SearchProps = {
   overlayClassName?: string
   value: string
   onChange: (newValue: string) => void
-  onActive?: (active: boolean) => void
+  onActive?: () => void
   loading?: boolean
   error?: boolean
   results: SearchResult[]
@@ -193,6 +198,18 @@ export function Search({
     []
   )
 
+  const handleFocus = useCallback<FocusEventHandler>(
+    event => {
+      const isFocus = event.type === 'focus'
+      const htmlStyle = document.documentElement.style
+      // Fixes page scroll jump https://github.com/shuding/nextra/issues/2840
+      htmlStyle.scrollPaddingTop = isFocus ? '0' : 'var(--nextra-navbar-height)'
+      if (isFocus) onActive?.()
+      setFocused(isFocus)
+    },
+    [onActive]
+  )
+
   return (
     <div className={cn('nextra-search _relative md:_w-64', className)}>
       {renderList && (
@@ -207,13 +224,8 @@ export function Search({
           onChange(value)
           setShow(Boolean(value))
         }}
-        onFocus={() => {
-          onActive?.(true)
-          setFocused(true)
-        }}
-        onBlur={() => {
-          setFocused(false)
-        }}
+        onFocus={handleFocus}
+        onBlur={handleFocus}
         onCompositionStart={handleComposition}
         onCompositionEnd={handleComposition}
         type="search"

packages/nextra/src/server/compile.ts

@@ -200,9 +200,9 @@ export async function compileMdx(
       ...(searchIndexKey !== null && { searchIndexKey, structurizedData }),
       frontMatter
     }
-  } catch (err) {
+  } catch (error) {
     console.error(`[nextra] Error compiling ${filePath}.`)
-    throw err
+    throw error
   }
 
   function createCompiler(): Processor {