Merge pull request #82 from kevinansfield/fix-trim-focus-input

Fix un-bound HTML attributes for `gh-trim-focus-input`

app/components/gh-trim-focus-input.js

@@ -1,9 +1,8 @@
 /*global device*/
 import Ember from 'ember';
-import boundOneWay from 'ghost-admin/utils/bound-one-way';
-import {InvokeActionMixin} from 'ember-invoke-action';
+import GhostInput from 'ghost-admin/components/gh-input';
 
-const {Component, computed} = Ember;
+const {computed} = Ember;
 
 /**
  * This doesn't override the OneWayInput component because
@@ -11,113 +10,40 @@ const {Component, computed} = Ember;
  * parts from both the OneWayInput component and Ember's default
  * input component
  */
-const TrimFocusInputComponent = Component.extend(InvokeActionMixin, {
-    tagName: 'input',
-    type: 'text',
-    focus: true,
-    classNames: 'gh-input',
+const TrimFocusInputComponent = GhostInput.extend({
 
-    // This is taken from Ember's input component
-    attributeBindings: [
-        'autofocus',
-        '_value:value',
-        'accept',
-        'autocomplete',
-        'autosave',
-        'dir',
-        'formaction',
-        'formenctype',
-        'formmethod',
-        'formnovalidate',
-        'formtarget',
-        'height',
-        'inputmode',
-        'lang',
-        'list',
-        'multiple',
-        'name',
-        'pattern',
-        'size',
-        'step',
-        'type',
-        'value',
-        'width'
-    ],
+    shouldFocus: true,
 
-    // These were in Ember's component
-    // so they are reproduced here
-    size: null,
-    pattern: null,
-    max: null,
-    min: null,
-
-    _value: boundOneWay('value'),
+    attributeBindings: ['autofocus'],
 
     autofocus: computed(function () {
-        if (this.get('focus')) {
+        if (this.get('shouldFocus')) {
             return (device.ios()) ? false : 'autofocus';
         }
 
         return false;
     }),
 
-    keyEvents: {
-        '13': 'onenter',
-        '27': 'onescape'
-    },
-
-    input() {
-        this._handleChangeEvent();
-    },
-
-    change() {
-        this._handleChangeEvent();
-    },
-
-    keyUp(event) {
-        this._interpretKeyEvents(event);
-    },
-
-    _interpretKeyEvents(event) {
-        let method = this.get(`keyEvents.${event.keyCode}`);
-
-        if (method) {
-            this._sanitizedValue = null;
-            this._handleChangeEvent(method);
-        }
-    },
-
-    _handleChangeEvent(method = 'update') {
-        let value = this.readDOMAttr('value');
-        this.invokeAction(method, value);
-    },
-
-    _trimValue() {
-        let text = this.readDOMAttr('value');
-        this.invokeAction('update', text.trim());
+    init() {
+        this._super(...arguments);
     },
 
     didInsertElement() {
         this._super(...arguments);
-        this._setFocus();
+        this._focus();
     },
 
-    _setFocus() {
+    sanitizeInput(input) {
+        return input.trim();
+    },
+
+    _focus() {
         // Until mobile safari has better support
         // for focusing, we just ignore it
-        if (this.get('focus') && !device.ios()) {
-            this.$().focus();
+        if (this.get('shouldFocus') && !device.ios()) {
+            this.element.focus();
         }
-    },
-
-    focusOut() {
-        this._super(...arguments);
-        this._trimValue();
     }
 });
 
-TrimFocusInputComponent.reopenClass({
-    positionalParams: ['value']
-});
-
 export default TrimFocusInputComponent;

app/templates/components/gh-navitem.hbs

@@ -6,7 +6,7 @@
 
 <div class="gh-blognav-line">
     {{#gh-validation-status-container tagName="span" class="gh-blognav-label" errors=navItem.errors property="label" hasValidated=navItem.hasValidated}}
-        {{gh-trim-focus-input navItem.label focus=navItem.last placeholder="Label" keyPress=(action "clearLabelErrors") update=(action (mut navItem.label))}}
+        {{gh-trim-focus-input navItem.label shouldFocus=navItem.last placeholder="Label" keyPress=(action "clearLabelErrors") update=(action (mut navItem.label))}}
         {{gh-error-message errors=navItem.errors property="label"}}
     {{/gh-validation-status-container}}
     {{#gh-validation-status-container tagName="span" class="gh-blognav-url" errors=navItem.errors property="url" hasValidated=navItem.hasValidated}}

app/templates/editor/edit.hbs

@@ -1,7 +1,7 @@
 <section class="gh-view">
     <header class="view-header">
         {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
-            {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" focus=shouldFocusTitle focus-out="updateTitle" update=(action (mut model.titleScratch))}}
+            {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" shouldFocus=shouldFocusTitle focus-out="updateTitle" update=(action (mut model.titleScratch))}}
         {{/gh-view-title}}
         {{#if scheduleCountdown}}
             <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule">

tests/integration/components/gh-trim-focus-input-test.js

@@ -28,13 +28,13 @@ describeComponent(
 
         it('does not have the autofocus attribute if not set to focus', function () {
             this.set('text', 'some text');
-            this.render(hbs`{{gh-trim-focus-input text focus=false}}`);
+            this.render(hbs`{{gh-trim-focus-input text shouldFocus=false}}`);
             expect(this.$('.gh-input').attr('autofocus')).to.not.be.ok;
         });
 
         it('has the autofocus attribute if set to focus', function () {
             this.set('text', 'some text');
-            this.render(hbs`{{gh-trim-focus-input text focus=true}}`);
+            this.render(hbs`{{gh-trim-focus-input text shouldFocus=true}}`);
             expect(this.$('.gh-input').attr('autofocus')).to.be.ok;
         });
     }