diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx index 75a2e5ab..0fb8dcad 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx @@ -32,7 +32,7 @@ export type QuickSearchProps = { label?: string; placeholder?: string; groupKey?: string; - isExpanded?: boolean; + beforeList?: ReactNode; }; export const QuickSearch = ({ @@ -42,7 +42,7 @@ export const QuickSearch = ({ showInput = true, label, placeholder, - isExpanded, + beforeList, children, }: PropsWithChildren) => { const ref = useRef(null); @@ -74,11 +74,11 @@ export const QuickSearch = ({ onFilter={onFilter} placeholder={placeholder} listId={listId} - isExpanded={isExpanded} > {inputContent} )} + {beforeList} {children} diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx index e0d2c1a5..8137464c 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import { HorizontalSeparator } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; +import { useFocusStore } from '@/stores'; import { Box } from '../Box'; import { Icon } from '../Icon'; @@ -14,7 +15,6 @@ type QuickSearchInputProps = { placeholder?: string; withSeparator?: boolean; listId?: string; - isExpanded?: boolean; }; export const QuickSearchInput = ({ inputValue, @@ -23,18 +23,15 @@ export const QuickSearchInput = ({ children, withSeparator: separator = true, listId, - isExpanded, }: PropsWithChildren) => { const { t } = useTranslation(); const { spacingsTokens } = useCunninghamTheme(); const inputRef = useRef(null); + const addLastFocus = useFocusStore((state) => state.addLastFocus); useEffect(() => { - inputRef.current?.setAttribute( - 'aria-expanded', - String(isExpanded ?? false), - ); - }, [isExpanded]); + addLastFocus(inputRef.current); + }, [addLastFocus]); if (children) { return ( diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx index f25151ca..74db8dc9 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx @@ -14,7 +14,7 @@ import { DocSearchFiltersValues, DocSearchTarget, } from '@/docs/doc-search'; -import { useResponsiveStore } from '@/stores'; +import { useFocusStore, useResponsiveStore } from '@/stores'; import EmptySearchIcon from '../assets/illustration-docs-empty.png'; @@ -36,6 +36,7 @@ const DocSearchModalGlobal = ({ }: DocSearchModalGlobalProps) => { const { t } = useTranslation(); const [loading, setLoading] = useState(false); + const restoreFocus = useFocusStore((state) => state.restoreFocus); const router = useRouter(); const [search, setSearch] = useState(''); const [filters, setFilters] = useState( @@ -51,6 +52,7 @@ const DocSearchModalGlobal = ({ const handleResetFilters = () => { setFilters({}); + restoreFocus(); }; return ( @@ -89,19 +91,22 @@ const DocSearchModalGlobal = ({ placeholder={t('Type the name of a document')} loading={loading} onFilter={handleInputSearch} - isExpanded={search.length > 0} + beforeList={ + showFilters ? ( + + + + ) : undefined + } > - {showFilters && ( - - )} {search.length === 0 && (