From ce2edc75e3f614f991fb14960f1b4855fc12f7fb Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Wed, 20 Dec 2017 15:48:28 -1000 Subject: [PATCH 1/3] fix(textfield): added isFocused to adapter to focus on input autofocus attr is present --- demos/text-field.html | 11 +++++++++-- packages/mdc-ripple/foundation.js | 1 + packages/mdc-textfield/adapter.js | 7 +++++++ packages/mdc-textfield/foundation.js | 5 +++++ packages/mdc-textfield/index.js | 3 +++ test/unit/mdc-textfield/foundation.test.js | 16 +++++++++++++++- 6 files changed, 40 insertions(+), 3 deletions(-) diff --git a/demos/text-field.html b/demos/text-field.html index eb403ae0253..db3d04a7502 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -74,7 +74,7 @@
- +
@@ -90,7 +90,7 @@

Full Functionality JS Component (Floating Label, Validation)

- +
@@ -177,6 +177,10 @@

Outlined Text Field

+
+ + +
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js index eb78011068a..98bf90490a3 100644 --- a/packages/mdc-ripple/foundation.js +++ b/packages/mdc-ripple/foundation.js @@ -463,6 +463,7 @@ class MDCRippleFoundation extends MDCFoundation { } this.layoutFrame_ = requestAnimationFrame(() => { this.layoutInternal_(); + this.layoutFrame_ = 0; }); } diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js index 42d70914eae..8149c631226 100644 --- a/packages/mdc-textfield/adapter.js +++ b/packages/mdc-textfield/adapter.js @@ -128,6 +128,13 @@ class MDCTextFieldAdapter { */ getIdleOutlineStyleValue(propertyName) {} + /** + * Returns true if the textfield is focused. + * We achieve this via `document.activeElement === this.root_`. + * @return {boolean} + */ + isFocused() {} + /** * Returns true if the direction of the root element is set to RTL. * @return {boolean} diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js index 965bf3bf48d..e93b4fc4157 100644 --- a/packages/mdc-textfield/foundation.js +++ b/packages/mdc-textfield/foundation.js @@ -59,6 +59,7 @@ class MDCTextFieldFoundation extends MDCFoundation { deregisterBottomLineEventHandler: () => {}, getNativeInput: () => {}, getIdleOutlineStyleValue: () => {}, + isFocused: () => {}, isRtl: () => {}, }); } @@ -109,6 +110,10 @@ class MDCTextFieldFoundation extends MDCFoundation { this.label_.floatAbove(); } + if (this.adapter_.isFocused()) { + this.inputFocusHandler_(); + } + this.adapter_.registerInputInteractionHandler('focus', this.inputFocusHandler_); this.adapter_.registerInputInteractionHandler('blur', this.inputBlurHandler_); this.adapter_.registerInputInteractionHandler('input', this.inputInputHandler_); diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js index ad7ca0a2c19..944b217663f 100644 --- a/packages/mdc-textfield/index.js +++ b/packages/mdc-textfield/index.js @@ -220,6 +220,9 @@ class MDCTextField extends MDCComponent { return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName); } }, + isFocused: () => { + return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR); + }, isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl', }, this.getInputAdapterMethods_())), diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js index a30b517b181..3ac63631afc 100644 --- a/test/unit/mdc-textfield/foundation.test.js +++ b/test/unit/mdc-textfield/foundation.test.js @@ -39,7 +39,7 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler', 'registerInputInteractionHandler', 'deregisterInputInteractionHandler', 'registerBottomLineEventHandler', 'deregisterBottomLineEventHandler', - 'getNativeInput', 'getIdleOutlineStyleValue', 'isRtl', + 'getNativeInput', 'getIdleOutlineStyleValue', 'isFocused', 'isRtl', ]); }); @@ -157,6 +157,20 @@ test('#init adds mdc-text-field--upgraded class', () => { td.verify(mockAdapter.addClass(cssClasses.UPGRADED)); }); +test('#init focuses on input if adapter.isFocused is true', () => { + const {foundation, mockAdapter} = setupTest(); + td.when(mockAdapter.isFocused()).thenReturn(true); + foundation.init(); + td.verify(foundation.inputFocusHandler_()); +}); + +test('#init does not focus if adapter.isFocused is false', () => { + const {foundation, mockAdapter} = setupTest(); + td.when(mockAdapter.isFocused()).thenReturn(false); + foundation.init(); + td.verify(foundation.inputFocusHandler_(), {times: 0}); +}); + test('#init adds event listeners', () => { const {foundation, mockAdapter} = setupTest(); foundation.init(); From 5459530328754af818cb654047761d7969ec6b5c Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 21 Dec 2017 08:20:27 -1000 Subject: [PATCH 2/3] fix(textfield): revert change addressed in PR #1813 --- demos/text-field.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/text-field.html b/demos/text-field.html index db3d04a7502..92614ae509f 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -74,7 +74,7 @@
- +
@@ -90,7 +90,7 @@

Full Functionality JS Component (Floating Label, Validation)

- +
From 3e6199166297ac27b3f556b43ac38c1326979dfd Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 21 Dec 2017 08:23:59 -1000 Subject: [PATCH 3/3] fix(textfield): removed unnecessary newline --- packages/mdc-ripple/foundation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js index 98bf90490a3..eb78011068a 100644 --- a/packages/mdc-ripple/foundation.js +++ b/packages/mdc-ripple/foundation.js @@ -463,7 +463,6 @@ class MDCRippleFoundation extends MDCFoundation { } this.layoutFrame_ = requestAnimationFrame(() => { this.layoutInternal_(); - this.layoutFrame_ = 0; }); }