EuiWrappingPopover example in popover docs for help

src-docs/src/views/popover/elastic_charts_wrapping_example.js

@@ -0,0 +1,113 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Axis,
+  BarSeries,
+  Chart,
+  Position,
+  ScaleType,
+  Settings,
+  toEntries,
+} from '@elastic/charts';
+
+import {
+  EuiColorPicker,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiWrappingPopover,
+  EuiFlexItem,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export const ElasticChartsColorPickerStoryExample = () => {
+  const [colors, setColors] = useState<Record>({});
+
+  const CustomColorPicker = useMemo(
+    () => ({ anchor, color, onClose, seriesIdentifiers, onChange }) => {
+      const handleClose = () => {
+        onClose();
+        anchor.focus();
+        setColors((prevColors) => ({
+          ...prevColors,
+          ...toEntries(seriesIdentifiers, 'key', color),
+        }));
+      };
+      const handleChange = (c) => {
+        setColors((prevColors) => ({
+          ...prevColors,
+          ...toEntries(seriesIdentifiers, 'key', c),
+        }));
+        onChange(c);
+      };
+
+      return (
+        <>
+          <EuiWrappingPopover
+            isOpen
+            button={anchor}
+            closePopover={handleClose}
+            anchorPosition="leftCenter"
+            // ownFocus={false}
+          >
+            <EuiColorPicker
+              display="inline"
+              color={color}
+              onChange={handleChange}
+            />
+            <EuiSpacer size="m" />
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty size="s" onClick={() => handleChange(null)}>
+                Clear color
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiButton fullWidth size="s" onClick={handleClose}>
+              Done
+            </EuiButton>
+          </EuiWrappingPopover>
+        </>
+      );
+    },
+    [setColors]
+  );
+  CustomColorPicker.displayName = 'CustomColorPicker';
+
+  const chart = (
+    <>
+      <Chart size={{ height: 200 }}>
+        <Settings showLegend legendColorPicker={CustomColorPicker} />
+        <Axis
+          id="bottom"
+          position={Position.Bottom}
+          title="Bottom axis"
+          showOverlappingTicks
+        />
+        <Axis
+          id="left2"
+          title="Left axis"
+          position={Position.Left}
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
+
+        <BarSeries
+          id="bars 1"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          splitSeriesAccessors={['g']}
+          data={[
+            { x: 0, g: 'a', y: 1 },
+            { x: 0, g: 'b', y: 2 },
+            { x: 1, g: 'a', y: 2 },
+            { x: 1, g: 'b', y: 3 },
+            { x: 2, g: 'a', y: 3 },
+            { x: 2, g: 'b', y: 4 },
+            { x: 3, g: 'a', y: 4 },
+            { x: 3, g: 'b', y: 5 },
+          ]}
+          color={({ key }) => colors[key] ?? null}
+        />
+      </Chart>
+    </>
+  );
+  return chart;
+};

src-docs/src/views/popover/popover_example.js

@@ -58,6 +58,8 @@ import InputPopover from './input_popover';
 const inputPopoverSource = require('!!raw-loader!./input_popover');
 const inputPopoverHtml = renderToHtml(PopoverBlock);
 
+import { ElasticChartsColorPickerStoryExample } from './elastic_charts_wrapping_example';
+
 const popOverSnippet = `<EuiPopover
   button={button}
   isOpen={isPopoverOpen}
@@ -462,5 +464,11 @@ export const PopoverExample = {
       ),
       demo: <PopoverHTMLElementAnchor />,
     },
+    {
+      title: 'Eui Wrapping Popover color picker within elastic charts',
+      text:
+        'Please help me. I must be missing something potentially really obvious. Thank you in advance.',
+      demo: <ElasticChartsColorPickerStoryExample />,
+    },
   ],
 };

src-docs/src/views/popover/popover_htmlelement_anchor.js

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 import { EuiWrappingPopover } from '../../../../src/components';
+import { EuiButton } from '../../../../src/components/button';
 
 const PopoverApp = (props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -23,6 +24,7 @@ const PopoverApp = (props) => {
       isOpen={isPopoverOpen}
       closePopover={closePopover}>
       <div>Normal JSX content populates the popover.</div>
+      <EuiButton onClick={closePopover}>Done</EuiButton>
     </EuiWrappingPopover>
   );
 };

src/components/popover/popover.tsx

@@ -262,7 +262,7 @@ const DEFAULT_POPOVER_STYLES = {
   left: 50,
 };
 
-function getElementFromInitialFocus(
+export function getElementFromInitialFocus(
   initialFocus?: FocusTarget
 ): HTMLElement | null {
   const initialFocusType = typeof initialFocus;

src/components/popover/wrapping_popover.tsx

@@ -7,7 +7,11 @@
  */
 
 import React, { Component } from 'react';
-import { EuiPopover, Props as EuiPopoverProps } from './popover';
+import {
+  EuiPopover,
+  // getElementFromInitialFocus,
+  Props as EuiPopoverProps,
+} from './popover';
 import { EuiPortal } from '../portal';
 
 export interface EuiWrappingPopoverProps extends EuiPopoverProps {
@@ -35,6 +39,7 @@ export class EuiWrappingPopover extends Component<EuiWrappingPopoverProps> {
         this.portal.insertAdjacentElement('beforebegin', this.props.button);
       }
     }
+    // this.updateFocus();
   }
 
   setPortalRef = (node: HTMLElement | null) => {
@@ -45,6 +50,21 @@ export class EuiWrappingPopover extends Component<EuiWrappingPopoverProps> {
     this.anchor = node;
   };
 
+  // updateFocus = () => {
+  //   if (
+  //     this.hasSetInitialFocus &&
+  //     this.panel.contains(document.activeElement)
+  //   ) {
+  //     return;
+  //   }
+  //   let focusTarget;
+
+  //   if (this.props.initialFocus != null) {
+  //     focusTarget = getElementFromInitialFocus(this.props.initialFocus);
+  //   }
+  //   focusTarget.focus();
+  // };
+
   render() {
     const { button, ...rest } = this.props;
 
@@ -53,6 +73,7 @@ export class EuiWrappingPopover extends Component<EuiWrappingPopoverProps> {
         portalRef={this.setPortalRef}
         insert={{ sibling: this.props.button, position: 'after' }}>
         <EuiPopover
+          ownFocus
           {...rest}
           button={
             <div