Codex: close search modal on result navigation

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/ModalSearch.test.tsx

@@ -0,0 +1,74 @@
+import { ModalSearch } from './ModalSearch'
+import { modalSearchStore } from './modalSearch.store'
+import { EuiProvider } from '@elastic/eui'
+import { act, render, screen } from '@testing-library/react'
+
+jest.mock('../AskAi/InfoBanner', () => ({
+    InfoBanner: () => null,
+}))
+
+jest.mock('../AskAi/KeyboardShortcutsFooter', () => ({
+    KeyboardShortcutsFooter: () => null,
+}))
+
+jest.mock('./useModalSearchQuery', () => ({
+    useModalSearchQuery: () => ({
+        isLoading: false,
+        isFetching: false,
+        data: { results: [] },
+        error: null,
+    }),
+}))
+
+jest.mock('./useModalSearchTelemetry', () => ({
+    useModalSearchTelemetry: () => ({
+        trackOpened: jest.fn(),
+        trackClosed: jest.fn(),
+    }),
+}))
+
+const renderModalSearch = () =>
+    render(
+        <EuiProvider
+            colorMode="light"
+            globalStyles={false}
+            utilityClasses={false}
+        >
+            <ModalSearch />
+        </EuiProvider>
+    )
+
+describe('ModalSearch', () => {
+    beforeEach(() => {
+        act(() => {
+            modalSearchStore.getState().actions.closeModal()
+        })
+    })
+
+    it('closes before an HTMX navigation swaps the page', () => {
+        renderModalSearch()
+
+        act(() => {
+            modalSearchStore.getState().actions.openModal()
+        })
+        expect(
+            screen.getByRole('button', { name: 'Close search modal' })
+        ).toBeInTheDocument()
+
+        const result = document.createElement('a')
+        result.setAttribute('data-search-result-index', '0')
+
+        act(() => {
+            document.dispatchEvent(
+                new CustomEvent('htmx:beforeSend', {
+                    detail: { elt: result },
+                })
+            )
+        })
+
+        expect(modalSearchStore.getState().isOpen).toBe(false)
+        expect(
+            screen.queryByRole('button', { name: 'Close search modal' })
+        ).not.toBeInTheDocument()
+    })
+})

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/ModalSearch.tsx

@@ -30,7 +30,7 @@ import {
     useEuiFontSize,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import { useEffect, useCallback, useRef } from 'react'
+import { useEffect, useCallback } from 'react'
 
 const SEARCH_KEYBOARD_SHORTCUTS = [
     { keys: ['returnKey'], label: 'Select' },
@@ -389,8 +389,6 @@ export const ModalSearch = ({
             document.removeEventListener('modal-search:open', handleOpenEvent)
     }, [openModal, trackOpened])
 
-    const backdropRef = useRef<HTMLDivElement>(null)
-
     useEffect(() => {
         if (isOpen) {
             const scrollbarWidth =
@@ -412,19 +410,6 @@ export const ModalSearch = ({
 
         const handleBeforeSend = (event: CustomEvent) => {
             const trigger = event.detail?.elt as HTMLElement | undefined
-            if (trigger?.hasAttribute('data-search-result-index')) {
-                if (backdropRef.current) {
-                    backdropRef.current.style.display = 'none'
-                }
-                document.body.style.overflow = ''
-                document.body.style.paddingRight = ''
-            }
-        }
-
-        const handleAfterSwap = (event: CustomEvent) => {
-            const trigger = event.detail?.requestConfig?.elt as
-                | HTMLElement
-                | undefined
             if (trigger?.hasAttribute('data-search-result-index')) {
                 closeModal()
             }
@@ -434,19 +419,11 @@ export const ModalSearch = ({
             'htmx:beforeSend',
             handleBeforeSend as EventListener
         )
-        document.addEventListener(
-            'htmx:afterSwap',
-            handleAfterSwap as EventListener
-        )
         return () => {
             document.removeEventListener(
                 'htmx:beforeSend',
                 handleBeforeSend as EventListener
             )
-            document.removeEventListener(
-                'htmx:afterSwap',
-                handleAfterSwap as EventListener
-            )
         }
     }, [isOpen, closeModal])
 
@@ -469,7 +446,6 @@ export const ModalSearch = ({
             {isOpen && (
                 <EuiPortal>
                     <div
-                        ref={backdropRef}
                         onClick={handleBackdropClick}
                         css={css`
                             position: fixed;