From da9a1bf3e686877e12c27ef21b186e6172ba6b7b Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 16 Apr 2021 19:55:05 +0530
Subject: [PATCH 1/2] Date pickups not working on filters

---
 src/components/BrowserFilter/BrowserFilter.react.js | 2 +-
 src/components/BrowserFilter/FilterRow.react.js     | 8 +++++---
 src/components/DateTimeEntry/DateTimeEntry.react.js | 2 +-
 src/components/Popover/Popover.react.js             | 6 +++++-
 src/lib/hasAncestor.js                              | 4 +++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index af000adb67..945c0f05c4 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -110,7 +110,7 @@ export default class BrowserFilter extends React.Component {
                 filters={this.state.filters}
                 onChange={filters => this.setState({ filters: filters })}
                 renderRow={props => (
-                  <FilterRow {...props} active={this.props.filters.size > 0} />
+                  <FilterRow {...props} active={this.props.filters.size > 0} parentContentId={POPOVER_CONTENT_ID} />
                 )}
               />
               <div className={styles.footer}>
diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js
index 4c8c2c12da..f7c2eb05ef 100644
--- a/src/components/BrowserFilter/FilterRow.react.js
+++ b/src/components/BrowserFilter/FilterRow.react.js
@@ -27,7 +27,7 @@ let setFocus = (input) => {
   }
 }
 
-function compareValue(info, value, onChangeCompareTo, active) {
+function compareValue(info, value, onChangeCompareTo, active, parentContentId) {
   switch (info.type) {
     case null:
       return null;
@@ -70,7 +70,8 @@ function compareValue(info, value, onChangeCompareTo, active) {
           className={styles.date}
           value={Parse._decode('date', value)}
           onChange={(value) => onChangeCompareTo(Parse._encode(value))}
-          ref={setFocus} />
+          ref={setFocus} 
+          parentContentId={parentContentId} />
       );
   }
 }
@@ -87,6 +88,7 @@ let FilterRow = ({
     onChangeCompareTo,
     onDeleteRow,
     active,
+    parentContentId,
   }) => (
   <div className={styles.row}>
     <ChromeDropdown
@@ -100,7 +102,7 @@ let FilterRow = ({
       value={Constraints[currentConstraint].name}
       options={constraints.map((c) => Constraints[c].name)}
       onChange={(c) => onChangeConstraint(constraintLookup[c])} />
-    {compareValue(compareInfo, compareTo, onChangeCompareTo, active)}
+    {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)}
     <a role='button' href='javascript:;' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></a>
   </div>
 );
diff --git a/src/components/DateTimeEntry/DateTimeEntry.react.js b/src/components/DateTimeEntry/DateTimeEntry.react.js
index 176155cc42..d1eb69c093 100644
--- a/src/components/DateTimeEntry/DateTimeEntry.react.js
+++ b/src/components/DateTimeEntry/DateTimeEntry.react.js
@@ -87,7 +87,7 @@ export default class DateTimeEntry extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={this.state.position} onExternalClick={this.close.bind(this)}>
+        <Popover fixed={true} position={this.state.position} onExternalClick={this.close.bind(this)}  parentContentId={this.props.parentContentId}>
           <DateTimePicker
             value={this.props.value}
             width={Math.max(this.node.clientWidth, 240)}
diff --git a/src/components/Popover/Popover.react.js b/src/components/Popover/Popover.react.js
index 4c5900035d..3a23f91732 100644
--- a/src/components/Popover/Popover.react.js
+++ b/src/components/Popover/Popover.react.js
@@ -57,6 +57,10 @@ export default class Popover extends React.Component {
       this._popoverLayer.className = styles.transition;
     }
 
+    if (this.props.parentContentId) {
+      this._popoverLayer.dataset.parentContentId = this.props.parentContentId;
+    }
+
     document.body.addEventListener('click', this._checkExternalClick);
   }
 
@@ -78,7 +82,7 @@ export default class Popover extends React.Component {
       : this._popoverLayer;
     const isChromeDropdown = e.target.parentNode.classList.contains('chromeDropdown');
     if (
-      !hasAncestor(e.target, popoverWrapper) &&
+      !hasAncestor(e.target, popoverWrapper, contentId) &&
       this.props.onExternalClick &&
       !isChromeDropdown
     ) {
diff --git a/src/lib/hasAncestor.js b/src/lib/hasAncestor.js
index 04a3b5550d..b846eb9a68 100644
--- a/src/lib/hasAncestor.js
+++ b/src/lib/hasAncestor.js
@@ -5,11 +5,13 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-export default function hasAncestor(node, ancestor) {
+export default function hasAncestor(node, ancestor, contentId) {
   let cur = node.parentNode;
   while (cur && cur.nodeType === 1) {
     if (cur === ancestor) {
       return true;
+    } else if (contentId && cur.dataset.parentContentId === contentId) {
+      return true;
     }
     cur = cur.parentNode;
   }

From 199563253f5e8898401c28f80c8bbc40971c9442 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 16 Apr 2021 19:56:10 +0530
Subject: [PATCH 2/2] catching onClick event,stop propagating to parent

---
 src/components/DateTimePicker/DateTimePicker.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateTimePicker/DateTimePicker.react.js b/src/components/DateTimePicker/DateTimePicker.react.js
index 5f9908f490..a4fdabe5b2 100644
--- a/src/components/DateTimePicker/DateTimePicker.react.js
+++ b/src/components/DateTimePicker/DateTimePicker.react.js
@@ -90,7 +90,7 @@ export default class DateTimePicker extends React.Component {
 
   render() {
     return (
-      <div style={{ width: this.props.width }} className={styles.picker}>
+      <div style={{ width: this.props.width }} className={styles.picker} onClick={(e) => e.stopPropagation()} >
         <Calendar local={this.props.local} value={this.props.value} onChange={(newValue) => {
           let timeRef = this.props.value || hoursFrom(new Date(), 1);
           let newDate = this.props.local ? new Date(