-
-
Save mattboldt/7e7437d57b0d62962e4b0b26b712810f to your computer and use it in GitHub Desktop.
Override Default textfield.js to remove is-invalid by default for required textfields.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
'use strict'; | |
MaterialTextfield = window['MaterialTextfield']; | |
/** | |
* Handle lost focus. | |
* | |
* @private | |
*/ | |
MaterialTextfield.prototype.onBlur_ = function() { | |
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); | |
this.checkValidity(); | |
}; | |
/** | |
* Handle change. | |
* | |
* @private | |
*/ | |
MaterialTextfield.prototype.onChange_ = function() { | |
this.checkValidity(); | |
}; | |
/** | |
* Handle class updates. | |
* | |
* @private | |
*/ | |
MaterialTextfield.prototype.updateClasses_ = function() { | |
this.checkDisabled(); | |
this.checkDirty(); | |
var dirty = this.element_.classList.contains(this.CssClasses_.IS_DIRTY); | |
var required = this.input_.required; | |
if (!required || required && dirty) { | |
this.checkValidity(); | |
} | |
this.checkFocus(); | |
}; | |
/** | |
* Enable text field. | |
* | |
* @public | |
*/ | |
MaterialTextfield.prototype.enable = function() { | |
this.input_.disabled = false; | |
this.updateClasses_(); | |
this.checkValidity(); | |
}; | |
MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable; | |
/** | |
* Initialize element. | |
*/ | |
MaterialTextfield.prototype.init = function() { | |
if (this.element_) { | |
this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL); | |
this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); | |
if (this.input_) { | |
if (this.input_.hasAttribute( | |
/** @type {string} */ | |
(this.Constant_.MAX_ROWS_ATTRIBUTE))) { | |
this.maxRows = parseInt(this.input_.getAttribute( | |
/** @type {string} */ | |
(this.Constant_.MAX_ROWS_ATTRIBUTE)), 10); | |
if (isNaN(this.maxRows)) { | |
this.maxRows = this.Constant_.NO_MAX_ROWS; | |
} | |
} | |
if (this.input_.hasAttribute('placeholder')) { | |
this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER); | |
} | |
this.boundUpdateClassesHandler = this.updateClasses_.bind(this); | |
this.boundFocusHandler = this.onFocus_.bind(this); | |
this.boundBlurHandler = this.onBlur_.bind(this); | |
this.boundResetHandler = this.onReset_.bind(this); | |
this.boundChangeHandler = this.onChange_.bind(this); | |
this.input_.addEventListener('input', this.boundUpdateClassesHandler); | |
this.input_.addEventListener('focus', this.boundFocusHandler); | |
this.input_.addEventListener('blur', this.boundBlurHandler); | |
this.input_.addEventListener('reset', this.boundResetHandler); | |
this.input_.addEventListener('change', this.boundChangeHandler); | |
if (this.maxRows !== this.Constant_.NO_MAX_ROWS) { | |
// TODO: This should handle pasting multi line text. | |
// Currently doesn't. | |
this.boundKeyDownHandler = this.onKeyDown_.bind(this); | |
this.input_.addEventListener('keydown', this.boundKeyDownHandler); | |
} | |
var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID); | |
this.updateClasses_(); | |
this.element_.classList.add(this.CssClasses_.IS_UPGRADED); | |
if (invalid) { | |
this.element_.classList.add(this.CssClasses_.IS_INVALID); | |
} | |
if (this.input_.hasAttribute('autofocus')) { | |
this.element_.focus(); | |
this.checkFocus(); | |
} | |
} | |
} | |
}; | |
// The component registers itself. It can assume componentHandler is available | |
// in the global scope. | |
componentHandler.registerUpgradedCallback(MaterialTextfield, function(textfield){}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment