aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/modals
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-05-24 17:54:23 +0200
committerArmand Philippot <git@armandphilippot.com>2022-05-24 17:54:23 +0200
commit691646c97b09f9150ac823670d6c661358c81c1c (patch)
treecc2115a23d9dae87b7cdfab9223f1366aa629c69 /src/components/organisms/modals
parent041fb0974f624368a45316c296c2a3e3c229dae2 (diff)
chore: give autofocus to the toolbar search form
Diffstat (limited to 'src/components/organisms/modals')
-rw-r--r--src/components/organisms/modals/search-modal.tsx25
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);