From 066972aa9874b21b6026c60cfe2ea45510e5776a Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 14 Aug 2020 11:08:55 -0600
Subject: [PATCH] combined refs; popoverProps clean up

---
 .../selectable_template_sitewide.tsx          | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx
index 7e8bd3b51bc7..864d0b22419a 100644
--- a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx
+++ b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx
@@ -24,6 +24,7 @@ import React, {
   CSSProperties,
 } from 'react';
 import classNames from 'classnames';
+import { useCombinedRefs } from '../../../services';
 import { EuiSelectable, EuiSelectableProps } from '../selectable';
 import { EuiPopoverTitle, EuiPopoverFooter } from '../../popover';
 import { EuiPopover, Props as PopoverProps } from '../../popover/popover';
@@ -85,19 +86,17 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<EuiSelectableTempl
   /**
    * Popover helpers
    */
+  const { closePopover: _closePopover, panelRef, width, ...popoverRest } = {
+    ...popoverProps,
+  };
   const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null);
   const closePopover = () => {
     setInputHasFocus(false);
-    popoverProps && popoverProps.closePopover && popoverProps.closePopover();
+    _closePopover && _closePopover();
   };
   // Width applied to the internal div
-  let popoverWidth: CSSProperties['width'] = 600;
-  if (popoverProps && popoverProps.width) {
-    // So it also needs to be removed from the spread
-    const { width, ...popoverRest } = popoverProps;
-    popoverWidth = popoverProps.width;
-    popoverProps = popoverRest;
-  }
+  const popoverWidth: CSSProperties['width'] = width || 600;
+  const setPanelRef = useCombinedRefs([setPopoverRef, panelRef]);
 
   /**
    * Search helpers
@@ -196,9 +195,8 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<EuiSelectableTempl
           panelPaddingSize="none"
           display="block"
           isOpen={inputHasFocus}
-          {...popoverProps}
-          // HELP: How to forward this ref if consumers want it
-          panelRef={setPopoverRef}
+          {...popoverRest}
+          panelRef={setPanelRef}
           button={search}
           closePopover={closePopover}>
           <div style={{ width: popoverWidth, maxWidth: '100%' }}>