feat: use select picker in RJSF

Amrit Kashyap Borah · Amrit Kashyap Borah · commit 041a2be6da5a · 2025-07-09T16:58:40.000+05:30
fix: RJSF select menu stacking context issue
diff --git a/src/Common/RJSF/Form.tsx b/src/Common/RJSF/Form.tsx
@@ -20,6 +20,7 @@ import RJSF from '@rjsf/core'
 import { SCHEMA_07_VALIDATOR } from '@Shared/validations'
 
 import { templates, widgets } from './config'
+import { RJSF_FORM_SELECT_PORTAL_TARGET_ID } from './constants'
 import { FormProps } from './types'
 import {
     getFormStateFromFormData,
@@ -82,28 +83,32 @@ export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) =>
     }
 
     return (
-        <Form
-            noHtml5Validate
-            showErrorList={false}
-            autoComplete="off"
-            {...props}
-            formData={formState}
-            {...(isUpdatePathKeywordPresent
-                ? {
-                      onChange: handleOnChange,
-                      onSubmit: handleOnSubmit,
-                  }
-                : {})}
-            className={`rjsf-form-template__container ${props.className || ''}`}
-            validator={validator}
-            templates={{
-                ...templates,
-                ...props.templates,
-            }}
-            formContext={formState}
-            widgets={{ ...widgets, ...props.widgets }}
-            translateString={translateString}
-            ref={ref}
-        />
+        <>
+            <Form
+                noHtml5Validate
+                showErrorList={false}
+                autoComplete="off"
+                {...props}
+                formData={formState}
+                {...(isUpdatePathKeywordPresent
+                    ? {
+                          onChange: handleOnChange,
+                          onSubmit: handleOnSubmit,
+                      }
+                    : {})}
+                className={`rjsf-form-template__container ${props.className || ''}`}
+                validator={validator}
+                templates={{
+                    ...templates,
+                    ...props.templates,
+                }}
+                formContext={formState}
+                widgets={{ ...widgets, ...props.widgets }}
+                translateString={translateString}
+                ref={ref}
+            />
+            {/* NOTE: due to stacking context issues, we send this id to SelectPicker menuPortalTarget prop */}
+            <div id={RJSF_FORM_SELECT_PORTAL_TARGET_ID} />
+        </>
     )
 })
diff --git a/src/Common/RJSF/common/FieldRow.tsx b/src/Common/RJSF/common/FieldRow.tsx
@@ -31,7 +31,7 @@ export const FieldRowWithLabel = ({
     <div
         className={
             showLabel
-                ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
+                ? `display-grid dc__gap-12 rjsf-form-template__field ${!shouldAlignCenter ? 'rjsf-form-template__field--align-top' : ''}`
                 : ''
         }
     >
diff --git a/src/Common/RJSF/constants.ts b/src/Common/RJSF/constants.ts
@@ -27,3 +27,5 @@ export const HIDE_SUBMIT_BUTTON_UI_SCHEMA = {
         norender: true,
     },
 }
+
+export const RJSF_FORM_SELECT_PORTAL_TARGET_ID = 'rjsf-form-select-portal-target'
diff --git a/src/Common/RJSF/rjsfForm.scss b/src/Common/RJSF/rjsfForm.scss
@@ -33,6 +33,22 @@
         }
     }
 
+    &__field {
+        align-items: center;
+    }
+
+    &__field:has([class^="devtron-rjsf-select__"]),
+    &__field.rjsf-form-template__field--align-top {
+        align-items: flex-start;
+    }
+
+    &__field:has([class^="devtron-rjsf-select__"]) {
+        label {
+            line-height: 32px;
+        }
+    }
+
+
     &__additional-fields {
         grid-template-columns: 1fr 1fr;
     }
@@ -90,4 +106,4 @@
             transition: all 100ms ease-out;
         }
     }
-}
+}
diff --git a/src/Common/RJSF/widgets/Select.tsx b/src/Common/RJSF/widgets/Select.tsx
@@ -15,22 +15,10 @@
  */
 
 import { WidgetProps } from '@rjsf/utils'
-import ReactSelect, { MenuListProps, components } from 'react-select'
-import { PLACEHOLDERS } from '../constants'
+import { PLACEHOLDERS, RJSF_FORM_SELECT_PORTAL_TARGET_ID } from '../constants'
 
-import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { deepEqual } from '@Common/Helper'
-import { commonSelectStyles } from '@Shared/Components'
-
-const MenuList = ({ children, ...props }: MenuListProps) => (
-    <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
-)
-
-const DropdownIndicator = (props) => (
-    <components.DropdownIndicator {...props}>
-        <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
-    </components.DropdownIndicator>
-)
+import { SelectPicker } from '@Shared/Components'
 
 export const SelectWidget = (props: WidgetProps) => {
     const {
@@ -47,7 +35,7 @@ export const SelectWidget = (props: WidgetProps) => {
         placeholder,
     } = props
     const { enumOptions: selectOptions = [] } = options
-    const emptyValue = multiple ? [] : ''
+    const emptyValue = multiple ? [] : null
 
     const handleChange = (option) => {
         onChange(multiple ? option.map((o) => o.value) : option.value)
@@ -59,8 +47,8 @@ export const SelectWidget = (props: WidgetProps) => {
             : selectOptions.find((option) => deepEqual(value, option.value))
 
     return (
-        <ReactSelect
-            id={id}
+        <SelectPicker
+            inputId={`devtron-rjsf-select__${id}`}
             name={id}
             isMulti={multiple}
             value={typeof value === 'undefined' ? emptyValue : getOption(value)}
@@ -71,23 +59,8 @@ export const SelectWidget = (props: WidgetProps) => {
             onFocus={() => onFocus(id, value)}
             placeholder={placeholder || PLACEHOLDERS.SELECT}
             isDisabled={disabled || readonly}
-            styles={{
-                ...commonSelectStyles,
-                control: (base, state) => ({
-                    ...commonSelectStyles.control(base, state),
-                    minHeight: '36px',
-                }),
-                multiValue: (base, state) => ({
-                    ...commonSelectStyles.multiValue(base, state),
-                    margin: '2px 8px 2px 2px',
-                }),
-            }}
-            components={{
-                IndicatorSeparator: null,
-                DropdownIndicator,
-                MenuList,
-            }}
-            menuPlacement="auto"
+            menuPortalTarget={document.getElementById(RJSF_FORM_SELECT_PORTAL_TARGET_ID)}
+            menuPosition='fixed'
         />
     )
 }
diff --git a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
@@ -376,8 +376,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         onKeyDown?.(e)
     }
 
-    const handleFocus: ReactSelectProps['onFocus'] = () => {
-        setIsFocussed(true)
+    const handleFocus: ReactSelectProps['onFocus'] = (e) => {
+        if (!shouldRenderTextArea) {
+            setIsFocussed(true)
+        }
+
+        props.onFocus?.(e)
     }
 
     const handleBlur: ReactSelectProps['onFocus'] = (e) => {
@@ -483,7 +487,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                         onKeyDown={handleKeyDown}
                         shouldRenderTextArea={shouldRenderTextArea}
                         customDisplayText={customDisplayText}
-                        {...(!shouldRenderTextArea ? { onFocus: handleFocus } : {})}
+                        onFocus={handleFocus}
                         onBlur={handleBlur}
                         onChange={handleChange}
                         controlShouldRenderValue={controlShouldRenderValue}
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
@@ -170,6 +170,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     | 'filterOption'
     | 'noOptionsMessage'
     | 'defaultMenuIsOpen'
+    | 'onFocus'
 > &
     Partial<
         Pick<

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export const FieldRowWithLabel = ({`
`31`	`31`	`<div`
`32`	`32`	`className={`
`33`	`33`	`showLabel`
`34`		- ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
	`34`	+ ? `display-grid dc__gap-12 rjsf-form-template__field ${!shouldAlignCenter ? 'rjsf-form-template__field--align-top' : ''}`
`35`	`35`	`: ''`
`36`	`36`	`}`
`37`	`37`	`>`
Original file line number	Diff line number	Diff line change
`@@ -27,3 +27,5 @@ export const HIDE_SUBMIT_BUTTON_UI_SCHEMA = {`
`27`	`27`	`norender: true,`
`28`	`28`	`},`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+export const RJSF_FORM_SELECT_PORTAL_TARGET_ID = 'rjsf-form-select-portal-target'`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,22 @@`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
	`36`	`+ &__field {`
	`37`	`+ align-items: center;`
	`38`	`+ }`
	`39`	`+`
	`40`	`+ &__field:has([class^="devtron-rjsf-select__"]),`
	`41`	`+ &__field.rjsf-form-template__field--align-top {`
	`42`	`+ align-items: flex-start;`
	`43`	`+ }`
	`44`	`+`
	`45`	`+ &__field:has([class^="devtron-rjsf-select__"]) {`
	`46`	`+ label {`
	`47`	`+ line-height: 32px;`
	`48`	`+ }`
	`49`	`+ }`
	`50`	`+`
	`51`	`+`
`36`	`52`	`&__additional-fields {`
`37`	`53`	`grid-template-columns: 1fr 1fr;`
`38`	`54`	`}`
`@@ -90,4 +106,4 @@`
`90`	`106`	`transition: all 100ms ease-out;`
`91`	`107`	`}`
`92`	`108`	`}`
`93`		`-}`
	`109`	`+}`