diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 2f904002986..39b2c990f22 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -20,6 +20,7 @@ import { useTheme2 } from '../../themes'; import { getSelectStyles } from './getSelectStyles'; import { cleanValue, findSelectedValue } from './utils'; import { SelectBaseProps, SelectValue } from './types'; +import { deprecationWarning } from '@grafana/data'; interface ExtraValuesIndicatorProps { maxVisibleValues?: number | undefined; @@ -116,6 +117,7 @@ export function SelectBase({ minMenuHeight, maxVisibleValues, menuPlacement = 'auto', + menuPortalTarget, menuPosition, noOptionsMessage = 'No options found', onBlur, @@ -136,6 +138,11 @@ export function SelectBase({ width, isValidNewOption, }: SelectBaseProps) { + if (menuPortalTarget !== undefined) { + deprecationWarning('SelectBase', 'menuPortalTarget'); + } else { + menuPortalTarget = document.body; + } const theme = useTheme2(); const styles = getSelectStyles(theme); const onChangeWithEmpty = useCallback( @@ -199,7 +206,7 @@ export function SelectBase({ maxVisibleValues, menuIsOpen: isOpen, menuPlacement, - menuPortalTarget: document.body, + menuPortalTarget, menuPosition, menuShouldBlockScroll: true, menuShouldScrollIntoView: false, diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts index f18fd37daea..a14b1b9ba90 100644 --- a/packages/grafana-ui/src/components/Select/types.ts +++ b/packages/grafana-ui/src/components/Select/types.ts @@ -41,6 +41,12 @@ export interface SelectCommonProps { minMenuHeight?: number; maxVisibleValues?: number; menuPlacement?: 'auto' | 'bottom' | 'top'; + /** + * @deprecated Setting `menuPortalTarget` to null will revert to previous `Select` behaviour. + * This is provided as an escape hatch for cases where portalling is a breaking change (e.g. `Select` wrapped in `ClickOutsideWrapper`). + * It's recommended to achieve the same behaviour using `onCloseMenu`, as this will be removed at some point. + */ + menuPortalTarget?: HTMLElement | null; menuPosition?: 'fixed' | 'absolute'; /** The message to display when no options could be found */ noOptionsMessage?: string;