Split widgetWrapper to calendarWrapper and clockWrapper

wojtekmaj · Nov 9, 2022 · c563d9b · c563d9b
1 parent 7828ada
commit c563d9b
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/DateTimeRangePicker.jsx b/src/DateTimeRangePicker.jsx
@@ -36,7 +36,9 @@ export default class DateTimeRangePicker extends PureComponent {
 
   wrapper = createRef();
 
-  widgetWrapper = createRef();
+  calendarWrapper = createRef();
+
+  clockWrapper = createRef();
 
   componentDidMount() {
     this.handleOutsideActionListeners();
@@ -73,15 +75,16 @@ export default class DateTimeRangePicker extends PureComponent {
   }
 
   onOutsideAction = (event) => {
-    const { wrapper, widgetWrapper } = this;
+    const { wrapper, calendarWrapper, clockWrapper } = this;
 
     // Try event.composedPath first to handle clicks inside a Shadow DOM.
     const target = 'composedPath' in event ? event.composedPath()[0] : event.target;
 
     if (
       wrapper.current &&
       !wrapper.current.contains(target) &&
-      (!widgetWrapper.current || !widgetWrapper.current.contains(target))
+      (!calendarWrapper.current || !calendarWrapper.current.contains(target)) &&
+      (!clockWrapper.current || !clockWrapper.current.contains(target))
     ) {
       this.closeWidgets();
     }
@@ -412,7 +415,7 @@ export default class DateTimeRangePicker extends PureComponent {
 
     return portalContainer ? (
       createPortal(
-        <div ref={this.widgetWrapper} className={classNames}>
+        <div ref={this.calendarWrapper} className={classNames}>
           {calendar}
         </div>,
         portalContainer,
@@ -470,7 +473,7 @@ export default class DateTimeRangePicker extends PureComponent {
 
     return portalContainer ? (
       createPortal(
-        <div ref={this.widgetWrapper} className={classNames}>
+        <div ref={this.clockWrapper} className={classNames}>
           {clock}
         </div>,
         portalContainer,