FIX: safari desktop doesnt support input[time] (#7719)

FIX: safari desktop doesnt support input[time] (#7719)

This commit attempts to improve the experience by:

  • showing time input as disabled on any platform if date hasn’t been set
  • showing a placeholder --:-- to emphasize the expected format
diff --git a/app/assets/javascripts/discourse/components/future-date-input.js.es6 b/app/assets/javascripts/discourse/components/future-date-input.js.es6
index 4efb9da..9386c1b 100644
--- a/app/assets/javascripts/discourse/components/future-date-input.js.es6
+++ b/app/assets/javascripts/discourse/components/future-date-input.js.es6
@@ -36,6 +36,8 @@ export default Ember.Component.extend({
     }
   },
 
+  timeInputDisabled: Ember.computed.empty("date"),
+
   @observes("date", "time")
   _updateInput() {
     if (!this.date) {
diff --git a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
index 336fabe..d1e9bce 100644
--- a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
@@ -21,7 +21,7 @@
 
     <div class="control-group">
       {{d-icon "far-clock"}}
-      {{input type="time" value=time}}
+      {{input placeholder="--:--" type="time" value=time disabled=timeInputDisabled}}
     </div>
   {{/if}}
 
diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index 8a5b5c4..09a52d2 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -49,6 +49,10 @@
         font-size: $font-up-1;
       }
     }
+
+    input[disabled] {
+      background: $primary-low;
+    }
   }
   .pika-single {
     position: absolute !important; /* inline JS styles */

GitHub sha: a652d620

2 Likes