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 index 93edc5b3dc..b85a097164 100644 --- 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'}} /> { 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'}} /> diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js index 263d9c838f..ec7a503869 100644 --- 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 index 5e80d60cd3..630c1628bf 100644 --- 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} /> @@ -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 index 63a4b7028a..594e22dfa0 100644 --- 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} /> @@ -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 index e155210651..348af271e7 100644 --- 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} /> @@ -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;