💄 [#4693] Fix select menu overflow issues in prefill modal

open-formulieren · Oct 29, 2024 · f9fda81 · f9fda81
1 parent 90ad52d
commit f9fda81
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 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
@@ -110,6 +110,7 @@ const ObjectsAPIFields = ({errors}) => {
           }}
           name="prefillOptions.objectsApiGroup"
           onApiGroupChange={onApiGroupChange}
+          selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
         />
 
         <ErrorBoundary
@@ -126,6 +127,7 @@ const ObjectsAPIFields = ({errors}) => {
             name="prefillOptions.objecttypeUuid"
             apiGroupFieldName="prefillOptions.objectsApiGroup"
             versionFieldName="prefillOptions.objecttypeVersion"
+            selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
             onChangeCheck={() => {
               if (variablesMapping.length === 0) return true;
               const confirmSwitch = window.confirm(
@@ -157,6 +159,7 @@ const ObjectsAPIFields = ({errors}) => {
             name="prefillOptions.objecttypeVersion"
             apiGroupFieldName="prefillOptions.objectsApiGroup"
             objectTypeFieldName="prefillOptions.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
@@ -119,6 +119,7 @@ const SelectWithFormik = ({name, options, className, ...props}) => {
         }
       }}
       {...props}
+      // maxMenuHeight=""
     />
   );
 };

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,6 +25,7 @@ const ObjectTypeSelect = ({
   apiGroupFieldName = 'objectsApiGroup',
   onChangeCheck,
   versionFieldName = 'objecttypeVersion',
+  selectProps = {},
 }) => {
   const [fieldProps, , fieldHelpers] = useField(name);
   const {
@@ -94,6 +95,7 @@ const ObjectTypeSelect = ({
             const okToProceed = onChangeCheck === undefined || onChangeCheck();
             if (okToProceed) setValue(selectedOption.value);
           }}
+          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -120,6 +122,11 @@ 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,6 +29,7 @@ const ObjectTypeVersionSelect = ({
   name = 'objecttypeVersion',
   apiGroupFieldName = 'objectsApiGroup',
   objectTypeFieldName = 'objecttype',
+  selectProps = {},
 }) => {
   const {getFieldProps} = useFormikContext();
 
@@ -71,6 +72,7 @@ const ObjectTypeVersionSelect = ({
           options={options}
           isLoading={loading}
           isDisabled={!objecttype}
+          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -92,6 +94,10 @@ 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,6 +12,7 @@ const ObjectsAPIGroup = ({
   onChangeCheck,
   name = 'objectsApiGroup',
   onApiGroupChange,
+  selectProps = {},
 }) => {
   const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField(name);
   const {setValues} = useFormikContext();
@@ -51,6 +52,7 @@ const ObjectsAPIGroup = ({
             const okToProceed = onChangeCheck === undefined || onChangeCheck();
             if (okToProceed) setValue(selectedOption.value);
           }}
+          {...selectProps}
         />
       </Field>
     </FormRow>
@@ -91,6 +93,11 @@ 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;