Drop: maintain scroll position on render. DateTime: fixed closing lay…

…er on date select.
kennynaoh · Oct 17, 2016 · 42b19a5 · 42b19a5
1 parent 8a13828
commit 42b19a5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/js/components/DateTime.js b/src/js/components/DateTime.js
@@ -117,14 +117,14 @@ export default class DateTime extends Component {
     }
   }
 
-  _notify (date, day) {
+  _notify (date, checkClose) {
     const { format, onChange } = this.props;
     if (onChange) {
       onChange(date);
-      if (day && !TIME_REGEXP.test(format)) {
+      if (checkClose && !TIME_REGEXP.test(format)) {
         // check to close the drop only if the user selected a day
         // and the format of the date does not include time
-        this.setState({dropActive: false, cursor: -1});
+        this.setState({ dropActive: false, cursor: -1 });
       }
     }
   }

diff --git a/src/js/components/DateTimeDrop.js b/src/js/components/DateTimeDrop.js
@@ -179,7 +179,10 @@ export default class DateTimeDrop extends Component {
     }
   }
 
-  _onDay (date) {
+  _onDay (date, event) {
+    event.stopPropagation();
+    // using native event to avoid document click in DateTime to be invoked
+    event.nativeEvent.stopImmediatePropagation();
     const { format, onChange } = this.props;
     const { intl } = this.context;
     this.setState({
@@ -199,7 +202,7 @@ export default class DateTimeDrop extends Component {
     const today = moment().startOf('day').add(timeOfDay);
     this.setState({ value: today }, () => {
       const dateFormatted = today.format(format);
-      onChange(dateFormatted);
+      onChange(dateFormatted, true);
       const selectedMessage = Intl.getMessage(intl, 'Selected');
       announce(`${dateFormatted} ${selectedMessage}`);
     });

diff --git a/src/js/utils/Drop.js b/src/js/utils/Drop.js
@@ -232,9 +232,14 @@ export default {
   },
 
   _render (drop, content) {
-    render(<DropContents drop={drop} content={content} />, drop.container);
-    // in case content changed, re-place
-    setTimeout(this._place.bind(this, drop), 1);
+    const originalScrollPosition = drop.container.scrollTop;
+    render(<DropContents drop={drop} content={content} />, drop.container,
+      () => {
+        this._place.bind(this, drop);
+        // reset container to its original scroll position
+        drop.container.scrollTop = originalScrollPosition;
+      }
+    );
   },
 
   _remove (drop) {