Don't close widgets when clicked within its wrapper

Author: wojtekmaj

src/DateTimePicker.jsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
@@ -35,6 +35,10 @@ export default class DateTimePicker extends PureComponent {
 
   state = {};
 
+  wrapper = createRef();
+
+  widgetWrapper = createRef();
+
   componentDidMount() {
     this.handleOutsideActionListeners();
   }
@@ -70,9 +74,16 @@ export default class DateTimePicker extends PureComponent {
   }
 
   onOutsideAction = (event) => {
+    const { wrapper, widgetWrapper } = this;
+
     // Try event.composedPath first to handle clicks inside a Shadow DOM.
     const target = 'composedPath' in event ? event.composedPath()[0] : event.target;
-    if (this.wrapper && !this.wrapper.contains(target)) {
+
+    if (
+      wrapper.current &&
+      !wrapper.current.contains(target) &&
+      (!widgetWrapper.current || !widgetWrapper.current.contains(target))
+    ) {
       this.closeWidgets();
     }
   };
@@ -338,7 +349,12 @@ export default class DateTimePicker extends PureComponent {
     );
 
     return portalContainer ? (
-      createPortal(<div className={classNames}>{calendar}</div>, portalContainer)
+      createPortal(
+        <div ref={this.widgetWrapper} className={classNames}>
+          {calendar}
+        </div>,
+        portalContainer,
+      )
     ) : (
       <Fit>
         <div
@@ -394,7 +410,12 @@ export default class DateTimePicker extends PureComponent {
     );
 
     return portalContainer ? (
-      createPortal(<div className={classNames}>{clock}</div>, portalContainer)
+      createPortal(
+        <div ref={this.widgetWrapper} className={classNames}>
+          {clock}
+        </div>,
+        portalContainer,
+      )
     ) : (
       <Fit>
         <div
@@ -428,13 +449,7 @@ export default class DateTimePicker extends PureComponent {
         )}
         {...eventPropsWithoutOnChange}
         onFocus={this.onFocus}
-        ref={(ref) => {
-          if (!ref) {
-            return;
-          }
-
-          this.wrapper = ref;
-        }}
+        ref={this.wrapper}
       >
         {this.renderInputs()}
         {this.renderCalendar()}