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 fe7df3214a..2627b132eb 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 @@ -198,7 +198,6 @@ const ObjectsAPIFields = ({errors}) => { }} name="options.objectsApiGroup" onApiGroupChange={onApiGroupChange} - selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}} /> { name="options.objecttypeUuid" apiGroupFieldName="options.objectsApiGroup" versionFieldName="options.objecttypeVersion" - selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}} onChangeCheck={async () => { if (variablesMapping.length === 0) return true; const confirmSwitch = await openObjectTypeConfirmationModal(); @@ -240,7 +238,6 @@ const ObjectsAPIFields = ({errors}) => { name="options.objecttypeVersion" apiGroupFieldName="options.objectsApiGroup" objectTypeFieldName="options.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..58e3f446e2 100644 --- 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 index 630c1628bf..5e80d60cd3 100644 --- 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} /> @@ -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 index 594e22dfa0..63a4b7028a 100644 --- 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} /> @@ -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 index 3ec3556186..3354714044 100644 --- a/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js +++ b/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js @@ -14,7 +14,6 @@ const ObjectsAPIGroup = ({ onApiGroupChange, isClearable = false, required = true, - selectProps = {}, }) => { const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField(name); const {setValues} = useFormikContext(); @@ -69,7 +68,6 @@ const ObjectsAPIGroup = ({ } }} isClearable={isClearable} - {...selectProps} /> @@ -121,11 +119,6 @@ ObjectsAPIGroup.propTypes = { * Indicate if the field is required or optional. */ required: PropTypes.bool, - - /** - * 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 index 51f867573b..0f8e2eb91a 100644 --- 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 index 7742660e24..42649d6b99 100644 --- 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 + } }