Merge branch 'datepicker-auto-open' into 'develop'

Datepicker: auto open

See merge request soapbox-pub/soapbox-fe!564

app/soapbox/features/compose/components/schedule_form.js

@@ -31,16 +31,21 @@ class ScheduleForm extends React.Component {
     active: PropTypes.bool,
   };
 
+  state = {
+    initialized: false,
+  }
+
   setSchedule = date => {
     this.props.onSchedule(date);
   }
 
-  openDatePicker(datePicker) {
+  setRef = c => {
-    if (!datePicker) {
+    this.datePicker = c;
-      return;
+  }
-    }
 
-    datePicker.setOpen(true);
+  openDatePicker = () => {
+    if (!this.datePicker) return;
+    this.datePicker.setOpen(true);
   }
 
   isCurrentOrFutureDate(date) {
@@ -59,6 +64,19 @@ class ScheduleForm extends React.Component {
     e.preventDefault();
   }
 
+  initialize = () => {
+    const { initialized } = this.state;
+
+    if (!initialized && this.datePicker) {
+      this.openDatePicker();
+      this.setState({ initialized: true });
+    }
+  }
+
+  componentDidUpdate() {
+    this.initialize();
+  }
+
   render() {
     if (!this.props.active) {
       return null;
@@ -82,7 +100,7 @@ class ScheduleForm extends React.Component {
             placeholderText={this.props.intl.formatMessage(messages.schedule)}
             filterDate={this.isCurrentOrFutureDate}
             filterTime={this.isFiveMinutesFromNow}
-            ref={this.isCurrentOrFutureDate(scheduledAt) ? null : this.openDatePicker}
+            ref={this.setRef}
           />
           <div className='datepicker__cancel'>
             <IconButton size={20} title={intl.formatMessage(messages.remove)} icon='times' onClick={this.handleRemove} />