[EuiDatePicker] Better handle onBlur callback (#5441)

* euitooltip respects child callbacks * euidatepicker better handles onBlur callback * pass event to callbacks * update snapshot * REVERT ME - docs * CL * document check * Revert "REVERT ME - docs" This reverts commit 70dc65b.
elastic · Dec 6, 2021 · f73360c · f73360c
1 parent d16ae7d
commit f73360c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 - Fixed scrollbars in `EuiRange` tick labels in Safari ([#5427](https://github.com/elastic/eui/pull/5427))
 - Fixed an `EuiOverlayMask` bug where it calls window.document on server side([#5422](https://github.com/elastic/eui/pull/5422))
 - Fixed unremoved event listener memory leak in `EuiPopover` ([#5437](https://github.com/elastic/eui/pull/5437))
+- Fixed `EuiDatePicker` not correctly handling the `onBlur` callback ([#5441](https://github.com/elastic/eui/pull/5441))
+- Fixed `EuiToolTip` not correctly handling child `onBlur` and `onFocus` callbacks ([#5441](https://github.com/elastic/eui/pull/5441))
 
 ## [`42.0.0`](https://github.com/elastic/eui/tree/v42.0.0)
 

diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -897,6 +897,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                 isOpen={false}
                 ownFocus={false}
                 panelPaddingSize="none"
+                panelRef={[Function]}
               >
                 <EuiOutsideClickDetector
                   onOutsideClick={[Function]}

diff --git a/src/components/date_picker/react-datepicker/src/calendar.js b/src/components/date_picker/react-datepicker/src/calendar.js
@@ -733,7 +733,7 @@ export default class Calendar extends React.Component {
             disabled={this.state.pauseFocusTrap || !this.props.enableFocusTrap}
             className="react-datepicker__focusTrap"
             initialFocus={initialFocusTarget}
-            onClickOutside={() => this.props.setOpen(false, true)}
+            onClickOutside={this.handleClickOutside}
           >
             {this.renderPreviousMonthButton()}
             {this.renderNextMonthButton()}

diff --git a/src/components/date_picker/react-datepicker/src/index.js b/src/components/date_picker/react-datepicker/src/index.js
@@ -235,6 +235,11 @@ export default class DatePicker extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.calcInitialState();
+
+    // Refs
+    this.input;
+    this.calendar;
+    this.popover;
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -339,7 +344,13 @@ export default class DatePicker extends React.Component {
               enableFocusTrap: skipSetBlur ? false : prev.enableFocusTrap
             }),
             () => {
-              !skipSetBlur && this.setBlur();
+              // Skip `onBlur` if 
+              // 1) we are possibly manually moving focus between the input and popover (skipSetBlur) and
+              // 2) the blur event keeps focus on the input 
+              // Focus is also guaranteed to not be inside the popover at this point
+              if (!skipSetBlur || (document != null && document.activeElement !== this.input)) {
+                this.setBlur();
+              } 
 
               this.setState({ inputValue: null });
             }
@@ -385,21 +396,26 @@ export default class DatePicker extends React.Component {
 
   handleBlur = event => {
     if (this.props.accessibleMode === true) {
-      // allow normal de-focusing in a11y mode
-      return;
-    }
-
-    if (this.state.open && !this.props.withPortal) {
-      this.deferFocusInput();
+      // Fire the `onBlur` callback if
+      // 1) the popover is closed or
+      // 2) the blur event places focus outside the popover
+      // Focus is also guaranteed to not on be on input at this point
+      if (!this.state.open || (this.popover && !this.popover.contains(event.relatedTarget))) {
+        this.props.onBlur && this.props.onBlur(event);
+      }
     } else {
-      this.props.onBlur(event);
+      if (this.state.open && !this.props.withPortal) {
+        this.deferFocusInput();
+      } else {
+        this.props.onBlur && this.props.onBlur(event);
+      }
+      this.setState({ focused: false });
     }
-    this.setState({ focused: false });
   };
 
   handleCalendarClickOutside = event => {
     if (!this.props.inline) {
-      this.setOpen(false);
+      this.setOpen(false, true);
     }
     this.props.onClickOutside(event);
     if (this.props.withPortal) {
@@ -854,6 +870,9 @@ export default class DatePicker extends React.Component {
         panelPaddingSize="none"
         anchorPosition={this.props.popperPlacement}
         container={this.props.popperContainer}
+        panelRef={elem => {
+          this.popover = elem;
+        }}
         {...this.props.popperProps}
         button={
           <div className="react-datepicker__input-container">

diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
@@ -351,8 +351,14 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
          * element has focus.
          */}
         {cloneElement(children, {
-          onFocus: this.onFocus,
-          onBlur: this.onBlur,
+          onFocus: (e: React.FocusEvent) => {
+            this.onFocus();
+            children.props.onFocus && children.props.onFocus(e);
+          },
+          onBlur: (e: React.FocusEvent) => {
+            this.onBlur();
+            children.props.onBlur && children.props.onBlur(e);
+          },
           ...(visible && { 'aria-describedby': this.state.id }),
         })}
       </span>