diff --git a/packages/react-components/src/atoms/MultiSelect.tsx b/packages/react-components/src/atoms/MultiSelect.tsx index 3b375f0235..c539ea9c2c 100644 --- a/packages/react-components/src/atoms/MultiSelect.tsx +++ b/packages/react-components/src/atoms/MultiSelect.tsx @@ -147,6 +147,7 @@ export type MultiSelectProps< readonly id?: string; readonly enabled?: boolean; readonly placeholder?: string; + readonly onFocus?: () => void; readonly onChange?: M extends true ? MultiSelectOnChange : SingleSelectOnChange; @@ -191,6 +192,7 @@ const MultiSelect = < placeholder = '', maxMenuHeight, noOptionsMessage, + onFocus = noop, onChange = noop, sortable = true, creatable = false, @@ -278,7 +280,13 @@ const MultiSelect = < ref: (ref: RefType) => { inputRef = ref; }, - onFocus: checkValidation, + onFocus: () => { + if (onFocus) { + onFocus(); + } + + checkValidation(); + }, onBlur: checkValidation, onChange: ( options: M extends true ? OptionsType : T | null, @@ -333,6 +341,7 @@ const MultiSelect = < loadOptions={loadOptions} cacheOptions defaultOptions + maxMenuHeight={maxMenuHeight} /> )} = ({ padding, children, overrideModalStyles, -}) => ( -
-
-
- -
-
- -
{children}
-
+}) => { + useEffect(() => { + const originalStyle = window.getComputedStyle(document.body).overflow; + document.body.style.overflow = 'hidden'; + + return () => { + document.body.style.overflow = originalStyle; + }; + }, []); + + return ( +
+
+
+ +
+
+ +
{children}
+
+
-
-); + ); +}; export default Modal; diff --git a/packages/react-components/src/organisms/ComplianceAssignUsersModal.tsx b/packages/react-components/src/organisms/ComplianceAssignUsersModal.tsx index d37c067dce..a9c43878dc 100644 --- a/packages/react-components/src/organisms/ComplianceAssignUsersModal.tsx +++ b/packages/react-components/src/organisms/ComplianceAssignUsersModal.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { ComponentProps, useState } from 'react'; +import { ComponentProps, useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; import { AuthorSelect, OptionsType } from '..'; import { Button, Headline3, Paragraph, Subtitle } from '../atoms'; @@ -118,6 +118,7 @@ const ComplianceAssignUsersModal: React.FC = ({ getAssignedUsersSuggestions, assignedUsers, }) => { + const bottomDivRef = useRef(null); const { setValue, watch, handleSubmit } = useForm({ mode: 'onBlur', defaultValues: { @@ -164,6 +165,14 @@ const ComplianceAssignUsersModal: React.FC = ({ { + if (bottomDivRef.current) { + bottomDivRef.current.scrollIntoView({ + behavior: 'smooth', + }); + } + }} isMulti creatable={false} title="Assign User" @@ -181,7 +190,7 @@ const ComplianceAssignUsersModal: React.FC = ({ />
-
+