From 25431f32f028ae19cefacffbdd5dfc82aff007e9 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Sun, 9 Feb 2020 13:37:00 +0100
Subject: [PATCH] Select: Portaling for Select (#22040)

---
 .../components/Forms/Select/ButtonSelect.tsx  |   1 -
 .../components/Forms/Select/Select.story.tsx  |   1 -
 .../src/components/Forms/Select/Select.tsx    |   8 +-
 .../Forms/Select/SelectBase.test.tsx          |  12 +-
 .../components/Forms/Select/SelectBase.tsx    | 191 +++++++++---------
 .../src/components/Portal/Portal.tsx          |   9 +-
 6 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx
index eca501dec5b..43ccb5968de 100644
--- a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx
@@ -74,7 +74,6 @@ export function ButtonSelect<T>({
   return (
     <SelectBase
       {...selectProps}
-      portal={document.body}
       renderControl={React.forwardRef<any, CustomControlProps<T>>(({ onBlur, onClick, value, isOpen }, ref) => {
         return (
           <SelectButton {...buttonProps} innerRef={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
diff --git a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
index ac6332ac78d..eb4397b1951 100644
--- a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
@@ -237,7 +237,6 @@ export const customizedControl = () => {
         setValue(v);
       }}
       size="md"
-      portal={document.body}
       renderControl={React.forwardRef(({ isOpen, value, ...otherProps }, ref) => {
         return (
           <Button {...otherProps} ref={ref}>
diff --git a/packages/grafana-ui/src/components/Forms/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Select/Select.tsx
index eb9acfc7f09..06a25b794da 100644
--- a/packages/grafana-ui/src/components/Forms/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/Select.tsx
@@ -3,12 +3,12 @@ import { SelectableValue } from '@grafana/data';
 import { SelectCommonProps, SelectBase, MultiSelectCommonProps, SelectAsyncProps } from './SelectBase';
 
 export function Select<T>(props: SelectCommonProps<T>) {
-  return <SelectBase {...props} portal={props.portal || document.body} />;
+  return <SelectBase {...props} />;
 }
 
 export function MultiSelect<T>(props: MultiSelectCommonProps<T>) {
   // @ts-ignore
-  return <SelectBase {...props} portal={props.portal || document.body} isMulti />;
+  return <SelectBase {...props} isMulti />;
 }
 
 interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options'>, SelectAsyncProps<T> {
@@ -17,7 +17,7 @@ interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options'>, Sel
 }
 
 export function AsyncSelect<T>(props: AsyncSelectProps<T>) {
-  return <SelectBase {...props} portal={props.portal || document.body} />;
+  return <SelectBase {...props} />;
 }
 
 interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'options'>, SelectAsyncProps<T> {
@@ -27,5 +27,5 @@ interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'opti
 
 export function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>) {
   // @ts-ignore
-  return <SelectBase {...props} portal={props.portal || document.body} isMulti />;
+  return <SelectBase {...props} isMulti />;
 }
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.test.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.test.tsx
index 45adb0532dd..99a8c550950 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.test.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.test.tsx
@@ -18,11 +18,11 @@ const options: Array<SelectableValue<number>> = [
 
 describe('SelectBase', () => {
   it('renders without error', () => {
-    mount(<SelectBase portal={null} onChange={onChangeHandler} />);
+    mount(<SelectBase onChange={onChangeHandler} />);
   });
 
   it('renders empty options information', () => {
-    const container = mount(<SelectBase portal={null} onChange={onChangeHandler} isOpen />);
+    const container = mount(<SelectBase onChange={onChangeHandler} isOpen />);
     const noopt = container.find({ 'aria-label': 'No options provided' });
     expect(noopt).toHaveLength(1);
   });
@@ -30,7 +30,7 @@ describe('SelectBase', () => {
   describe('when openMenuOnFocus prop', () => {
     describe('is provided', () => {
       it('opens on focus', () => {
-        const container = mount(<SelectBase portal={null} onChange={onChangeHandler} openMenuOnFocus />);
+        const container = mount(<SelectBase onChange={onChangeHandler} openMenuOnFocus />);
         container.find('input').simulate('focus');
 
         const menu = findMenuElement(container);
@@ -44,7 +44,7 @@ describe('SelectBase', () => {
         ${'ArrowUp'}
         ${' '}
       `('opens on arrow down/up or space', ({ key }) => {
-        const container = mount(<SelectBase portal={null} onChange={onChangeHandler} />);
+        const container = mount(<SelectBase onChange={onChangeHandler} />);
         const input = container.find('input');
         input.simulate('focus');
         input.simulate('keydown', { key });
@@ -56,14 +56,14 @@ describe('SelectBase', () => {
 
   describe('options', () => {
     it('renders menu with provided options', () => {
-      const container = mount(<SelectBase portal={null} options={options} onChange={onChangeHandler} isOpen />);
+      const container = mount(<SelectBase options={options} onChange={onChangeHandler} isOpen />);
       const menuOptions = container.find({ 'aria-label': 'Select option' });
       expect(menuOptions).toHaveLength(2);
     });
     it('call onChange handler when option is selected', () => {
       const spy = jest.fn();
       const handler = (value: SelectableValue<number>) => spy(value);
-      const container = mount(<SelectBase portal={null} options={options} onChange={handler} isOpen />);
+      const container = mount(<SelectBase options={options} onChange={handler} isOpen />);
       const menuOptions = container.find({ 'aria-label': 'Select option' });
       expect(menuOptions).toHaveLength(2);
       const menuOption = menuOptions.first();
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
index 93afd80249e..cee52571a5b 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { SelectableValue, deprecationWarning } from '@grafana/data';
 // @ts-ignore
 import { default as ReactSelect } from '@torkelo/react-select';
@@ -24,6 +24,7 @@ import { SingleValue } from './SingleValue';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { useTheme } from '../../../themes';
 import { getSelectStyles } from './getSelectStyles';
+import { RefForwardingPortal } from '../../Portal/Portal';
 
 type SelectValue<T> = T | SelectableValue<T> | T[] | Array<SelectableValue<T>>;
 
@@ -64,8 +65,6 @@ export interface SelectCommonProps<T> {
   prefix?: JSX.Element | string | null;
   /** Use a custom element to control Select. A proper ref to the renderControl is needed if 'portal' isn't set to null*/
   renderControl?: ControlComponent<T>;
-  /** An element where the dropdown menu should be rendered. In all Select implementations it defaults to document.body .*/
-  portal?: HTMLElement | null;
 }
 
 export interface SelectAsyncProps<T> {
@@ -84,7 +83,6 @@ export interface MultiSelectCommonProps<T> extends Omit<SelectCommonProps<T>, 'o
 
 export interface SelectBaseProps<T> extends SelectCommonProps<T>, SelectAsyncProps<T> {
   invalid?: boolean;
-  portal: HTMLElement | null;
 }
 
 export interface CustomControlProps<T> {
@@ -177,10 +175,10 @@ export function SelectBase<T>({
   renderControl,
   width,
   invalid,
-  portal,
   components,
 }: SelectBaseProps<T>) {
   const theme = useTheme();
+  const portalRef = useRef<HTMLDivElement>();
   const styles = getSelectStyles(theme);
   let ReactSelectComponent: ReactSelect | Creatable = ReactSelect;
   const creatableProps: any = {};
@@ -238,7 +236,7 @@ export function SelectBase<T>({
     renderControl,
     captureMenuScroll: false,
     blurInputOnSelect: true,
-    menuPortalTarget: portal,
+    menuPortalTarget: portalRef.current,
     menuPlacement: 'auto',
   };
 
@@ -265,95 +263,98 @@ export function SelectBase<T>({
   }
 
   return (
-    <ReactSelectComponent
-      components={{
-        MenuList: SelectMenu,
-        Group: SelectOptionGroup,
-        ValueContainer: ValueContainer,
-        Placeholder: (props: any) => (
-          <div
-            {...props.innerProps}
-            className={cx(
-              css(props.getStyles('placeholder', props)),
-              css`
-                display: inline-block;
-                color: hsl(0, 0%, 50%);
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                box-sizing: border-box;
-                line-height: 1;
-              `
-            )}
-          >
-            {props.children}
-          </div>
-        ),
-        SelectContainer: (props: any) => (
-          <div
-            {...props.innerProps}
-            className={cx(
-              css(props.getStyles('container', props)),
-              css`
-                position: relative;
-              `,
-              inputSizes()[size]
-            )}
-          >
-            {props.children}
-          </div>
-        ),
-        IndicatorsContainer: IndicatorsContainer,
-        IndicatorSeparator: () => <></>,
-        Control: CustomControl,
-        Option: SelectMenuOptions,
-        ClearIndicator: (props: any) => {
-          const { clearValue } = props;
-          return (
-            <Icon
-              name="times"
-              onMouseDown={e => {
-                e.preventDefault();
-                e.stopPropagation();
-                clearValue();
-              }}
-            />
-          );
-        },
-        LoadingIndicator: (props: any) => {
-          return <Icon name="spinner" className="fa fa-spin" />;
-        },
-        LoadingMessage: (props: any) => {
-          return <div className={styles.loadingMessage}>{loadingMessage}</div>;
-        },
-        NoOptionsMessage: (props: any) => {
-          return (
-            <div className={styles.loadingMessage} aria-label="No options provided">
-              {noOptionsMessage}
+    <>
+      <ReactSelectComponent
+        components={{
+          MenuList: SelectMenu,
+          Group: SelectOptionGroup,
+          ValueContainer: ValueContainer,
+          Placeholder: (props: any) => (
+            <div
+              {...props.innerProps}
+              className={cx(
+                css(props.getStyles('placeholder', props)),
+                css`
+                  display: inline-block;
+                  color: hsl(0, 0%, 50%);
+                  position: absolute;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  box-sizing: border-box;
+                  line-height: 1;
+                `
+              )}
+            >
+              {props.children}
             </div>
-          );
-        },
-        DropdownIndicator: (props: any) => <DropdownIndicator isOpen={props.selectProps.menuIsOpen} />,
-        SingleValue: SingleValue,
-        MultiValueContainer: MultiValueContainer,
-        MultiValueRemove: MultiValueRemove,
-        ...components,
-      }}
-      styles={{
-        ...resetSelectStyles(),
-        //These are required for the menu positioning to function
-        menu: ({ top, bottom, width, position }: any) => ({
-          top,
-          bottom,
-          width,
-          position,
-          marginBottom: !!bottom ? '10px' : '0',
-        }),
-      }}
-      className={widthClass}
-      {...commonSelectProps}
-      {...creatableProps}
-      {...asyncSelectProps}
-    />
+          ),
+          SelectContainer: (props: any) => (
+            <div
+              {...props.innerProps}
+              className={cx(
+                css(props.getStyles('container', props)),
+                css`
+                  position: relative;
+                `,
+                inputSizes()[size]
+              )}
+            >
+              {props.children}
+            </div>
+          ),
+          IndicatorsContainer: IndicatorsContainer,
+          IndicatorSeparator: () => <></>,
+          Control: CustomControl,
+          Option: SelectMenuOptions,
+          ClearIndicator: (props: any) => {
+            const { clearValue } = props;
+            return (
+              <Icon
+                name="times"
+                onMouseDown={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  clearValue();
+                }}
+              />
+            );
+          },
+          LoadingIndicator: (props: any) => {
+            return <Icon name="spinner" className="fa fa-spin" />;
+          },
+          LoadingMessage: (props: any) => {
+            return <div className={styles.loadingMessage}>{loadingMessage}</div>;
+          },
+          NoOptionsMessage: (props: any) => {
+            return (
+              <div className={styles.loadingMessage} aria-label="No options provided">
+                {noOptionsMessage}
+              </div>
+            );
+          },
+          DropdownIndicator: (props: any) => <DropdownIndicator isOpen={props.selectProps.menuIsOpen} />,
+          SingleValue: SingleValue,
+          MultiValueContainer: MultiValueContainer,
+          MultiValueRemove: MultiValueRemove,
+          ...components,
+        }}
+        styles={{
+          ...resetSelectStyles(),
+          //These are required for the menu positioning to function
+          menu: ({ top, bottom, width, position }: any) => ({
+            top,
+            bottom,
+            width,
+            position,
+            marginBottom: !!bottom ? '10px' : '0',
+          }),
+        }}
+        className={widthClass}
+        {...commonSelectProps}
+        {...creatableProps}
+        {...asyncSelectProps}
+      />
+      <RefForwardingPortal ref={portalRef as any} />
+    </>
   );
 }
diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
index 586001b936f..b84da9f4c58 100644
--- a/packages/grafana-ui/src/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 interface Props {
   className?: string;
   root?: HTMLElement;
+  forwardedRef?: any;
 }
 
 export class Portal extends PureComponent<Props> {
@@ -29,8 +30,14 @@ export class Portal extends PureComponent<Props> {
   render() {
     // Default z-index is high to make sure
     return ReactDOM.createPortal(
-      <div style={{ zIndex: 1051, position: 'relative' }}>{this.props.children}</div>,
+      <div style={{ zIndex: 1051, position: 'relative' }} ref={this.props.forwardedRef}>
+        {this.props.children}
+      </div>,
       this.node
     );
   }
 }
+
+export const RefForwardingPortal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+  return <Portal {...props} forwardedRef={ref} />;
+});