fix(text-field): Update character counter to update when value is set. (

#4663)
material-components · May 4, 2019 · acfbe2d · acfbe2d
1 parent 5a52847
commit acfbe2d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/mdc-textfield/foundation.ts b/packages/mdc-textfield/foundation.ts
@@ -289,8 +289,8 @@ export class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {
     // Prevent Safari from moving the caret to the end of the input when the value has not changed.
     if (this.getValue() !== value) {
       this.getNativeInput_().value = value;
-      this.setCharacterCounter_(value.length);
     }
+    this.setCharacterCounter_(value.length);
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     if (this.adapter_.hasLabel()) {

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
@@ -222,6 +222,22 @@ test('#setValue updates character counter when present', () => {
   td.verify(characterCounter.setCounterValue(2, 4), {times: 1});
 });
 
+test('#setValue forces the character counter to update if value was updated independently', () => {
+  const {foundation, mockAdapter, characterCounter} = setupTest({useCharacterCounter: true});
+  const nativeInput = {
+    type: 'text',
+    value: '',
+    maxLength: 4,
+    validity: {
+      valid: true,
+    },
+  };
+  td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
+  nativeInput.value = 'ok';
+  foundation.setValue('ok');
+  td.verify(characterCounter.setCounterValue(2, 4), {times: 1});
+});
+
 test('#isValid for native validation', () => {
   const {foundation, nativeInput} = setupValueTest({value: '', optIsValid: true});
   assert.isOk(foundation.isValid());