ASAP-899 Fix scroll issue on assign users modal

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<T>
     : SingleSelectOnChange<T>;
@@ -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<T>) => {
       inputRef = ref;
     },
-    onFocus: checkValidation,
+    onFocus: () => {
+      if (onFocus) {
+        onFocus();
+      }
+
+      checkValidation();
+    },
     onBlur: checkValidation,
     onChange: (
       options: M extends true ? OptionsType<T> : T | null,
@@ -333,6 +341,7 @@ const MultiSelect = <
           loadOptions={loadOptions}
           cacheOptions
           defaultOptions
+          maxMenuHeight={maxMenuHeight}
         />
       )}
       <input

packages/react-components/src/molecules/Modal.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, useEffect } from 'react';
 import { css, SerializedStyles } from '@emotion/react';
 
 import { Card, Overlay } from '../atoms';
@@ -17,6 +17,7 @@ const overlayContainerStyles = css({
   top: 0,
   left: 0,
   zIndex: 1,
+  overflow: 'hidden',
 });
 
 const modalContainerStyles = css({
@@ -29,6 +30,7 @@ const modalContainerStyles = css({
 });
 const overlayStyles = css({
   gridArea: '1 / 1',
+  overflow: 'hidden',
 });
 const modalStyles = css({
   gridArea: '1 / 1',
@@ -62,19 +64,30 @@ const Modal: React.FC<ModalProps> = ({
   padding,
   children,
   overrideModalStyles,
-}) => (
-  <div css={overlayContainerStyles}>
-    <div css={modalContainerStyles}>
-      <div css={overlayStyles}>
-        <Overlay />
-      </div>
-      <div role="dialog" css={css([modalStyles, overrideModalStyles])}>
-        <Card padding={padding}>
-          <div css={scrollStyles}>{children}</div>
-        </Card>
+}) => {
+  useEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+
+  return (
+    <div css={overlayContainerStyles}>
+      <div css={modalContainerStyles}>
+        <div css={overlayStyles}>
+          <Overlay />
+        </div>
+        <div role="dialog" css={css([modalStyles, overrideModalStyles])}>
+          <Card padding={padding}>
+            <div css={scrollStyles}>{children}</div>
+          </Card>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Modal;

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<ComplianceAssignUsersModalProps> = ({
   getAssignedUsersSuggestions,
   assignedUsers,
 }) => {
+  const bottomDivRef = useRef<HTMLDivElement>(null);
   const { setValue, watch, handleSubmit } = useForm<AssignedUsersFormData>({
     mode: 'onBlur',
     defaultValues: {
@@ -164,6 +165,14 @@ const ComplianceAssignUsersModal: React.FC<ComplianceAssignUsersModalProps> = ({
             <InformationRow title="APC Coverage" value={apcCoverage} />
 
             <AuthorSelect
+              maxMenuHeight={170}
+              onFocus={() => {
+                if (bottomDivRef.current) {
+                  bottomDivRef.current.scrollIntoView({
+                    behavior: 'smooth',
+                  });
+                }
+              }}
               isMulti
               creatable={false}
               title="Assign User"
@@ -181,7 +190,7 @@ const ComplianceAssignUsersModal: React.FC<ComplianceAssignUsersModalProps> = ({
             />
           </div>
 
-          <div css={buttonContainerStyles}>
+          <div css={buttonContainerStyles} ref={bottomDivRef}>
             <div css={dismissButtonStyles}>
               <Button enabled={!isSubmitting} onClick={onDismiss}>
                 Cancel