Fix date filters (#1682)

* Date pickups not working on filters

* catching onClick event,stop propagating to parent

Author: sadakchap

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}>

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>
 );

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)}

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(

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
     ) {

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;
   }