Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit e80fe7d

Browse files
trimoxamsheehan
authored andcommitted
fix(textfield): Add badInput validity check to textfield (#570)
1 parent b6507ed commit e80fe7d

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

packages/mdc-textfield/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ complicated.
305305
| deregisterInputInputHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for an "input" event |
306306
| registerInputKeydownHandler(handler: EventListener) => void | Registers an event listener on the native input element for a "keydown" event |
307307
| deregisterInputKeydownHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for a "keydown" event |
308-
| getNativeInput() => {value: string, disabled: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value` and `disabled` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
308+
| getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value`, `disabled` and `badInput` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
309309

310310
#### The full foundation API
311311

packages/mdc-textfield/foundation.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
104104
const isValid = input.checkValidity();
105105

106106
this.adapter_.removeClass(FOCUSED);
107-
if (!input.value) {
107+
if (!input.value && !this.isBadInput_()) {
108108
this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
109109
this.receivedUserInput_ = false;
110110
}
@@ -140,6 +140,11 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
140140
this.adapter_.setHelptextAttr(ARIA_HIDDEN, 'true');
141141
}
142142

143+
isBadInput_() {
144+
const input = this.getNativeInput_();
145+
return input.validity ? input.validity.badInput : input.badInput;
146+
}
147+
143148
isDisabled() {
144149
return this.getNativeInput_().disabled;
145150
}
@@ -159,6 +164,7 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
159164
checkValidity: () => true,
160165
value: '',
161166
disabled: false,
167+
badInput: false,
162168
};
163169
}
164170
}

0 commit comments

Comments
 (0)