Merge pull request #844 from devtron-labs/fix/rjsf-select

fix: RJSF select picker menuPortalTarget issue

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.18.1-pre-7",
+    "version": "1.18.1-pre-8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -19,6 +19,8 @@ import { PLACEHOLDERS, RJSF_FORM_SELECT_PORTAL_TARGET_ID } from '../constants'
 
 import { deepEqual } from '@Common/Helper'
 import { SelectPicker } from '@Shared/Components'
+import { useEffect, useState } from 'react'
+import { getUniqueId } from '@Shared/Helpers'
 
 export const SelectWidget = (props: WidgetProps) => {
     const {
@@ -42,13 +44,22 @@ export const SelectWidget = (props: WidgetProps) => {
         onChange(multiple ? option.map((o) => o.value) : option.value)
     }
 
+    const [key, setKey] = useState<string>()
+
+    useEffect(() => {
+        // NOTE: need to trigger a re-render after re-mount since react-select
+        // has an issue with menuPortalTarget after re-mounting
+        setKey(getUniqueId(8))
+    }, [])
+
     const getOption = (value) =>
         multiple
             ? selectOptions.filter((option) => value.some((val) => deepEqual(val, option.value)))
             : selectOptions.find((option) => deepEqual(value, option.value))
 
     return (
         <SelectPicker
+            key={key}
             inputId={`devtron-rjsf-select__${id}`}
             name={id}
             isMulti={multiple}