diff --git a/packages/mdc-textfield/foundation.ts b/packages/mdc-textfield/foundation.ts index 0756c53fb50..70635afff4b 100644 --- a/packages/mdc-textfield/foundation.ts +++ b/packages/mdc-textfield/foundation.ts @@ -289,6 +289,7 @@ export class MDCTextFieldFoundation extends MDCFoundation { // 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 index ae118992d37..e1dbbd44006 100644 --- 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());