diff --git a/CHANGELOG.md b/CHANGELOG.md index bfb1f5ce67..ca6c46684e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,9 +17,20 @@ should change the heading of the (upcoming) version to include a major version b --> # 6.1.2 +## @rjsf/antd + +- Updated `SelectWidget` to add a static `getPopupContainerCallback` to the `SelectWidget` component, partially fixing [#3609](https://github.com/rjsf-team/react-jsonschema-form/issues/3609) + ## @rjsf/mantine -Align Mantine’s behavior with other themes when clearing string fields: clearing an input now removes the key from formData instead of setting it to an empty string. ([#4875](https://github.com/rjsf-team/react-jsonschema-form/pull/4875)) +- Align Mantine’s behavior with other themes when clearing string fields: clearing an input now removes the key from formData instead of setting it to an empty string. ([#4875](https://github.com/rjsf-team/react-jsonschema-form/pull/4875)) + +## Dev / docs / playground + +- Updated `DemoFrame` as follows to fix [#3609](https://github.com/rjsf-team/react-jsonschema-form/issues/3609) + - Override `antd`'s `SelectWidget.getPopupContainerCallback` callback function to return undefined + - Added a `AntdSelectPatcher` component that observes the creation of `antd` select dropdowns and makes sure they open in the correct location + - Update the `antd` theme wrapper to render the `AntdSelectPatcher`, `AntdStyleProvider` and `ConfigProvider` with it's own `getPopupContainer()` function inside of a `FrameContextConsumer` # 6.1.1 diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx index 3394126d76..b61787561f 100644 --- a/packages/antd/src/widgets/SelectWidget/index.tsx +++ b/packages/antd/src/widgets/SelectWidget/index.tsx @@ -1,3 +1,4 @@ +import { useMemo, useState } from 'react'; import { Select, SelectProps } from 'antd'; import { ariaDescribedByIds, @@ -11,7 +12,6 @@ import { } from '@rjsf/utils'; import isString from 'lodash/isString'; import { DefaultOptionType } from 'antd/es/select'; -import { useMemo } from 'react'; const SELECT_STYLE = { width: '100%', @@ -42,6 +42,7 @@ export default function SelectWidget< value, schema, }: WidgetProps) { + const [open, setOpen] = useState(false); const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; @@ -61,7 +62,7 @@ export default function SelectWidget< return false; }; - const getPopupContainer = (node: any) => node.parentNode; + const getPopupContainer = SelectWidget.getPopupContainerCallback(); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); @@ -92,6 +93,7 @@ export default function SelectWidget< return (