💄 [#4693] Use portalling to prevent hidden overflow of react-select menu

open-formulieren · Nov 12, 2024 · 8e23cf3 · 8e23cf3
1 parent a1cbd51
commit 8e23cf3
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 24 deletions.
diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js b/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
@@ -193,7 +193,6 @@ const ObjectsAPIFields = ({errors}) => {
           }}
           name="options.objectsApiGroup"
           onApiGroupChange={onApiGroupChange}
-          selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
         />
 
         <ErrorBoundary
@@ -210,7 +209,6 @@ const ObjectsAPIFields = ({errors}) => {
             name="options.objecttypeUuid"
             apiGroupFieldName="options.objectsApiGroup"
             versionFieldName="options.objecttypeVersion"
-            selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
             onChangeCheck={() => {
               if (variablesMapping.length === 0) return true;
               const confirmSwitch = window.confirm(
@@ -242,7 +240,6 @@ const ObjectsAPIFields = ({errors}) => {
             name="options.objecttypeVersion"
             apiGroupFieldName="options.objectsApiGroup"
             objectTypeFieldName="options.objecttypeUuid"
-            selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
           />
         </ErrorBoundary>
 

diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js
@@ -82,6 +82,7 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop
     classNamePrefix="admin-react-select"
     styles={styles}
     menuPlacement="auto"
+    menuPortalTarget={document.body}
     options={options}
     value={getValue(options, value)}
     onChange={selectedOption => {
@@ -107,6 +108,7 @@ const SelectWithFormik = ({name, options, className, ...props}) => {
       classNamePrefix="admin-react-select"
       styles={styles}
       menuPlacement="auto"
+      menuPortalTarget={document.body}
       options={options}
       {...fieldProps}
       value={getValue(options, value)}

diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js
@@ -25,7 +25,6 @@ const ObjectTypeSelect = ({
   apiGroupFieldName = 'objectsApiGroup',
   onChangeCheck,
   versionFieldName = 'objecttypeVersion',
-  selectProps = {},
 }) => {
   const [fieldProps, , fieldHelpers] = useField(name);
   const {
@@ -95,7 +94,6 @@ const ObjectTypeSelect = ({
             const okToProceed = onChangeCheck === undefined || onChangeCheck();
             if (okToProceed) setValue(selectedOption.value);
           }}
-          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -122,11 +120,6 @@ ObjectTypeSelect.propTypes = {
    * changes, the version will be reset/unset.
    */
   versionFieldName: PropTypes.string,
-
-  /**
-   * Additional properties to be forwarded to the React select component
-   */
-  selectProps: PropTypes.object,
 };
 
 export default ObjectTypeSelect;
diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js
@@ -29,7 +29,6 @@ const ObjectTypeVersionSelect = ({
   name = 'objecttypeVersion',
   apiGroupFieldName = 'objectsApiGroup',
   objectTypeFieldName = 'objecttype',
-  selectProps = {},
 }) => {
   const {getFieldProps} = useFormikContext();
 
@@ -72,7 +71,6 @@ const ObjectTypeVersionSelect = ({
           options={options}
           isLoading={loading}
           isDisabled={!objecttype}
-          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -94,10 +92,6 @@ ObjectTypeVersionSelect.propTypes = {
    * call to get the available object type versions.
    */
   objectTypeFieldName: PropTypes.string,
-  /**
-   * Additional properties to be forwarded to the React select component
-   */
-  selectProps: PropTypes.object,
 };
 
 export default ObjectTypeVersionSelect;
diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js b/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js
@@ -12,7 +12,6 @@ const ObjectsAPIGroup = ({
   onChangeCheck,
   name = 'objectsApiGroup',
   onApiGroupChange,
-  selectProps = {},
 }) => {
   const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField(name);
   const {setValues} = useFormikContext();
@@ -52,7 +51,6 @@ const ObjectsAPIGroup = ({
             const okToProceed = onChangeCheck === undefined || onChangeCheck();
             if (okToProceed) setValue(selectedOption.value);
           }}
-          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -93,11 +91,6 @@ ObjectsAPIGroup.propTypes = {
    * fire unexpectedly during re-renders.
    */
   onApiGroupChange: PropTypes.func,
-
-  /**
-   * Additional properties to be forwarded to the React select component
-   */
-  selectProps: PropTypes.object,
 };
 
 export default ObjectsAPIGroup;
diff --git a/src/openforms/scss/components/admin/_ReactModal.scss b/src/openforms/scss/components/admin/_ReactModal.scss
@@ -7,7 +7,9 @@
     align-items: center;
 
     position: fixed;
-    z-index: 1000;
+    // the base admin layout gets a z-index up until 2, so this ensures it's layered on top of the admin
+    // while leaving enough space for other UI elements on top of that (like react-select)
+    z-index: 3;
     top: 0;
     right: 0;
     bottom: 0;

diff --git a/src/openforms/scss/vendor/_react-select.scss b/src/openforms/scss/vendor/_react-select.scss
@@ -26,4 +26,8 @@
     var(--of-admin-select-max-inline-size)
   );
   max-inline-size: var(--of-admin-select-max-inline-size);
+
+  &__menu-portal {
+    z-index: 4 !important; // one higher than the react-modal z-index
+  }
 }