fix(text-field): Set character counter in setValue (#4572)

(cherry picked from commit bce2e63)
material-components · Apr 8, 2019 · 7261fd0 · 7261fd0
1 parent 60a268f
commit 7261fd0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/mdc-textfield/foundation.ts b/packages/mdc-textfield/foundation.ts
@@ -289,6 +289,7 @@ 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);
     }
     const isValid = this.isValid();
     this.styleValidity_(isValid);

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
@@ -206,6 +206,22 @@ test('#setValue does not affect disabled state', () => {
   td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 1});
 });
 
+test('#setValue updates character counter when present', () => {
+  const {foundation, mockAdapter, characterCounter} = setupTest({useCharacterCounter: true});
+  const nativeInput = {
+    type: 'text',
+    value: '',
+    maxLength: 4,
+    validity: {
+      valid: true,
+    },
+  };
+  td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
+
+  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());