FIX: auto-focus input field on Safari was closing the modal

app/assets/javascripts/discourse/components/auto-close-form.js.es6

@@ -2,8 +2,8 @@ import computed from "ember-addons/ember-computed-decorators";
 import { observes } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  autoCloseValid: false,
   limited: false,
+  autoCloseValid: false,
 
   @computed("limited")
   autoCloseUnits(limited) {
@@ -19,15 +19,14 @@ export default Ember.Component.extend({
 
   @observes("autoCloseTime", "limited")
   _updateAutoCloseValid() {
-    const autoCloseTime = this.get("autoCloseTime");
-    const limited = this.get("limited");
-
-    var isValid = this._isAutoCloseValid(autoCloseTime, limited);
+    const limited = this.get("limited"),
+          autoCloseTime = this.get("autoCloseTime"),
+          isValid = this._isAutoCloseValid(autoCloseTime, limited);
     this.set("autoCloseValid", isValid);
   },
 
   _isAutoCloseValid(autoCloseTime, limited) {
-    var t = (autoCloseTime || "").toString().trim();
+    const t = (autoCloseTime || "").toString().trim();
     if (t.length === 0) {
       // "empty" is always valid
       return true;

app/assets/javascripts/discourse/components/autofocus-text-field.js.es6

@@ -1,7 +1,12 @@
+import { on } from "ember-addons/ember-computed-decorators";
+
 export default Ember.TextField.extend({
-  becomeFocused: function() {
-    var input = this.get("element");
+
+  @on("didInsertElement")
+  becomeFocused() {
+    const input = this.get("element");
     input.focus();
     input.selectionStart = input.selectionEnd = input.value.length;
-  }.on('didInsertElement')
+  }
+
 });

app/assets/javascripts/discourse/components/search-text-field.js.es6

@@ -1,17 +1,19 @@
 import computed from 'ember-addons/ember-computed-decorators';
+import { on } from 'ember-addons/ember-computed-decorators';
 import TextField from 'discourse/components/text-field';
 
 export default TextField.extend({
   @computed('searchService.searchContextEnabled')
-  placeholder: function(searchContextEnabled) {
+  placeholder(searchContextEnabled) {
     return searchContextEnabled ? "" : I18n.t('search.title');
   },
 
-  focusIn: function() {
-    Em.run.later(() => { this.$().select(); });
+  focusIn() {
+    Em.run.later(() => this.$().select());
   },
 
-  becomeFocused: function() {
+  @on("didInsertElement")
+  becomeFocused() {
     if (this.get('hasAutofocus')) this.$().focus();
-  }.on('didInsertElement')
+  }
 });

app/assets/javascripts/discourse/components/text-field.js.es6

@@ -1,19 +1,10 @@
-/**
-  This is a custom text field that allows i18n placeholders
+import computed from "ember-addons/ember-computed-decorators";
 
-  @class TextField
-  @extends Ember.TextField
-  @namespace Discourse
-  @module Discourse
-**/
 export default Ember.TextField.extend({
   attributeBindings: ['autocorrect', 'autocapitalize', 'autofocus', 'maxLength'],
 
-  placeholder: function() {
-    if (this.get('placeholderKey')) {
-      return I18n.t(this.get('placeholderKey'));
-    } else {
-      return '';
-    }
-  }.property('placeholderKey')
+  @computed("placeholderKey")
+  placeholder(placeholderKey) {
+    return placeholderKey ? I18n.t(placeholderKey) : "";
+  }
 });

app/assets/javascripts/discourse/controllers/edit-topic-auto-close.js.es6

@@ -1,3 +1,4 @@
+import { observes } from "ember-addons/ember-computed-decorators";
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 
 // Modal related to auto closing of topics
@@ -5,31 +6,32 @@ export default Ember.Controller.extend(ModalFunctionality, {
   auto_close_valid: true,
   auto_close_invalid: Em.computed.not('auto_close_valid'),
 
-  setAutoCloseTime: function() {
-    var autoCloseTime = null;
+  @observes("model.details.auto_close_at", "model.details.auto_close_hours")
+  setAutoCloseTime() {
+    let autoCloseTime = null;
 
     if (this.get("model.details.auto_close_based_on_last_post")) {
       autoCloseTime = this.get("model.details.auto_close_hours");
     } else if (this.get("model.details.auto_close_at")) {
-      var closeTime = new Date(this.get("model.details.auto_close_at"));
+      const closeTime = new Date(this.get("model.details.auto_close_at"));
       if (closeTime > new Date()) {
         autoCloseTime = moment(closeTime).format("YYYY-MM-DD HH:mm");
       }
     }
 
     this.set("model.auto_close_time", autoCloseTime);
-  }.observes("model.details.{auto_close_at,auto_close_hours}"),
-
-  actions: {
-    saveAutoClose: function() { this.setAutoClose(this.get("model.auto_close_time")); },
-    removeAutoClose: function() { this.setAutoClose(null); }
   },
 
-  setAutoClose: function(time) {
-    var self = this;
+  actions: {
+    saveAutoClose() { this.setAutoClose(this.get("model.auto_close_time")); },
+    removeAutoClose() { this.setAutoClose(null); }
+  },
+
+  setAutoClose(time) {
+    const self = this;
     this.send('hideModal');
     Discourse.ajax({
-      url: '/t/' + this.get('model.id') + '/autoclose',
+      url: `/t/${this.get('model.id')}/autoclose`,
       type: 'PUT',
       dataType: 'json',
       data: {
@@ -37,15 +39,15 @@ export default Ember.Controller.extend(ModalFunctionality, {
         auto_close_based_on_last_post: this.get("model.details.auto_close_based_on_last_post"),
         timezone_offset: (new Date().getTimezoneOffset())
       }
-    }).then(function(result){
+    }).then(result => {
       if (result.success) {
-        self.send('closeModal');
-        self.set('model.details.auto_close_at', result.auto_close_at);
-        self.set('model.details.auto_close_hours', result.auto_close_hours);
+        this.send('closeModal');
+        this.set('model.details.auto_close_at', result.auto_close_at);
+        this.set('model.details.auto_close_hours', result.auto_close_hours);
       } else {
         bootbox.alert(I18n.t('composer.auto_close.error'), function() { self.send('reopenModal'); } );
       }
-    }, function () {
+    }).catch(() => {
       bootbox.alert(I18n.t('composer.auto_close.error'), function() { self.send('reopenModal'); } );
     });
   }

app/assets/javascripts/discourse/mixins/modal-functionality.js.es6

@@ -3,7 +3,7 @@ export default Em.Mixin.create({
 
   needs: ['modal'],
 
-  flash: function(message, messageClass) {
+  flash(message, messageClass) {
     this.set('flashMessage', Em.Object.create({ message, messageClass }));
   }
 });

app/assets/javascripts/discourse/routes/topic.js.es6

@@ -56,7 +56,7 @@ const TopicRoute = Discourse.Route.extend({
     },
 
     showAutoClose() {
-      showModal('edit-topic-auto-close', { model: this.modelFor('topic'), title: 'topic.auto_close_title' });
+      showModal('edit-topic-auto-close', { model: this.modelFor('topic') });
       this.controllerFor('modal').set('modalClass', 'edit-auto-close-modal');
     },
 

app/assets/javascripts/discourse/templates/components/auto-close-form.hbs

@@ -12,7 +12,7 @@
   </div>
   <div>
     <label>
-      {{input type="checkbox" name="autoCloseBasedOnLastPost" checked=autoCloseBasedOnLastPost}}
+      {{input type="checkbox" checked=autoCloseBasedOnLastPost}}
       {{i18n 'composer.auto_close.based_on_last_post'}}
     </label>
   </div>

app/assets/javascripts/discourse/templates/modal/edit-topic-auto-close.hbs

@@ -6,8 +6,8 @@
                       limited=model.details.auto_close_based_on_last_post }}
   </div>
   <div class="modal-footer">
-    <button class='btn btn-primary' type='submit' {{bind-attr disabled="auto_close_invalid"}}>{{i18n 'topic.auto_close_save'}}</button>
+    {{d-button class="btn-primary" disabled=auto_close_invalid label="topic.auto_close_save"}}
     <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
-    <button class='btn pull-right' {{action "removeAutoClose"}}>{{i18n 'topic.auto_close_remove'}}</button>
+    {{d-button class="pull-right" action="removeAutoClose" label="topic.auto_close_remove"}}
   </div>
 </form>

app/assets/javascripts/discourse/views/edit-topic-auto-close.js.es6

@@ -0,0 +1,7 @@
+import ModalBodyView from "discourse/views/modal-body";
+
+export default ModalBodyView.extend({
+  templateName: "modal/edit-topic-auto-close",
+  title: I18n.t("topic.auto_close_title"),
+  focusInput: false
+});

app/assets/javascripts/discourse/views/modal-body.js.es6

@@ -1,7 +1,10 @@
+import { observes, on } from "ember-addons/ember-computed-decorators";
+
 export default Ember.View.extend({
   focusInput: true,
 
-  _setupModal: function() {
+  @on("didInsertElement")
+  _setupModal() {
     $('#modal-alert').hide();
     $('#discourse-modal').modal('show');
 
@@ -14,9 +17,10 @@ export default Ember.View.extend({
     if (title) {
       this.set('controller.controllers.modal.title', title);
     }
-  }.on('didInsertElement'),
+  },
 
-  flashMessageChanged: function() {
+  @observes("controller.flashMessage")
+  flashMessageChanged() {
     const flashMessage = this.get('controller.flashMessage');
     if (flashMessage) {
       const messageClass = flashMessage.get('messageClass') || 'success';
@@ -25,6 +29,6 @@ export default Ember.View.extend({
                        .addClass("alert alert-" + messageClass).html(flashMessage.get('message'))
                        .fadeIn();
     }
-  }.observes('controller.flashMessage')
+  }
 
 });

app/assets/javascripts/discourse/views/modal.js.es6

@@ -1,3 +1,5 @@
+import { on } from "ember-addons/ember-computed-decorators";
+
 export default Ember.View.extend({
   elementId: 'discourse-modal',
   templateName: 'modal/modal',
@@ -7,17 +9,19 @@ export default Ember.View.extend({
   // We handle ESC ourselves
   'data-keyboard': 'false',
 
-  _bindOnInsert: function() {
+  @on("didInsertElement")
+  setUp() {
     $('html').on('keydown.discourse-modal', e => {
       if (e.which === 27) {
         Em.run.next(() => $('.modal-header a.close').click());
       }
     });
-  }.on('didInsertElement'),
+  },
 
-  _bindOnDestroy: function() {
+  @on("willDestroyElement")
+  cleanUp() {
     $('html').off('keydown.discourse-modal');
-  }.on('willDestroyElement'),
+  },
 
   click(e) {
     const $target = $(e.target);

app/assets/stylesheets/desktop/discourse.scss

@@ -185,7 +185,6 @@ body {
     border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-    transition: border linear 0.2s, box-shadow linear 0.2s;
   }
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
@@ -193,7 +192,6 @@ body {
       border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-      transition: border linear 0.2s, box-shadow linear 0.2s;
     }
   }
   textarea:focus {