diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-24 17:54:23 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-24 17:54:23 +0200 |
| commit | 691646c97b09f9150ac823670d6c661358c81c1c (patch) | |
| tree | cc2115a23d9dae87b7cdfab9223f1366aa629c69 /src/components/organisms/modals/search-modal.tsx | |
| parent | 041fb0974f624368a45316c296c2a3e3c229dae2 (diff) | |
chore: give autofocus to the toolbar search form
Diffstat (limited to 'src/components/organisms/modals/search-modal.tsx')
| -rw-r--r-- | src/components/organisms/modals/search-modal.tsx | 25 |
1 files changed, 9 insertions, 16 deletions
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index c731048..ed6084a 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,20 +1,10 @@ -import Spinner from '@components/atoms/loaders/spinner'; import Modal, { type ModalProps } from '@components/molecules/modals/modal'; -import dynamic from 'next/dynamic'; -import { FC } from 'react'; +import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import { type SearchFormProps } from '../forms/search-form'; +import SearchForm, { type SearchFormProps } from '../forms/search-form'; import styles from './search-modal.module.scss'; -const DynamicSearchForm = dynamic( - () => import('@components/organisms/forms/search-form'), - { - loading: () => <Spinner />, - ssr: false, - } -); - -export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & { +export type SearchModalProps = SearchFormProps & { /** * Set additional classnames to modal wrapper. */ @@ -26,7 +16,10 @@ export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & { * * Render a search form modal. */ -const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => { +const SearchModal: ForwardRefRenderFunction< + HTMLInputElement, + SearchModalProps +> = ({ className, searchPage }, ref) => { const intl = useIntl(); const modalTitle = intl.formatMessage({ defaultMessage: 'Search', @@ -36,9 +29,9 @@ const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => { return ( <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}> - <DynamicSearchForm hideLabel={true} searchPage={searchPage} /> + <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} /> </Modal> ); }; -export default SearchModal; +export default forwardRef(SearchModal); |
