Pause EuiOutsideClickDetector in EuiPopover and EuiColorPicker (#…

…1527) * EuiOutsideClickDetector should be disabled when the target element is not yet rendered: EuiPopover, EuiColorPicker * #1527 changelog entry * update changelog version location
elastic · Feb 5, 2019 · 27dc847 · 27dc847
1 parent 4b5987c
commit 27dc847
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - TypeScript are now formatted with Prettier ([#1529](https://github.com/elastic/eui/pull/1529))
+- Updated `EuiPopover` and `EuiColorPicker` to pause `EuiOutsideClickDetector` in when not open ([#1527](https://github.com/elastic/eui/pull/1527))
 
 ## [`6.9.0`](https://github.com/elastic/eui/tree/v6.9.0)
 

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -308,6 +308,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       withTitle={true}
                     >
                       <EuiOutsideClickDetector
+                        isDisabled={true}
                         onOutsideClick={[Function]}
                       >
                         <div

diff --git a/src/components/color_picker/color_picker.js b/src/components/color_picker/color_picker.js
@@ -64,7 +64,10 @@ export class EuiColorPicker extends Component {
     const { color, className, showColorLabel } = this.props;
     const classes = classNames('euiColorPicker', className);
     return (
-      <EuiOutsideClickDetector onOutsideClick={this.closeColorSelector}>
+      <EuiOutsideClickDetector
+        isDisabled={!this.state.showColorSelector}
+        onOutsideClick={this.closeColorSelector}
+      >
         <div
           className={classes}
           data-test-subj={this.props['data-test-subj']}

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -481,6 +481,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
     popoverRef={[Function]}
   >
     <EuiOutsideClickDetector
+      isDisabled={false}
       onOutsideClick={[Function]}
     >
       <div

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
@@ -480,7 +480,10 @@ export class EuiPopover extends Component {
     }
 
     return (
-      <EuiOutsideClickDetector onOutsideClick={closePopover}>
+      <EuiOutsideClickDetector
+        isDisabled={!isOpen}
+        onOutsideClick={closePopover}
+      >
         <div
           className={classes}
           onKeyDown={this.onKeyDown}