M
So I think I figured it out after a bit more digging. If anybody is interested, here are the changes I made:
[onsenui.js]
I added this to around line 18972:
_this._boundOnInput = _this._update.bind(_this);
_this._boundOnFocusin = _this._update.bind(_this);
_this._boundOnFocusout = _this._update.bind(_this);//<--- added this line
In the same area a little further down is a line “value: function _updateLabelClass() {”. I changed the whole block inside to this:
value: function _updateLabelClass() {
if(this == document.activeElement.parentNode){
this._helper.classList.remove('text-input--material__label--inactive');
this._helper.classList.add('text-input--material__label--active');
}else if(this.value === ''){
this._helper.classList.remove('text-input--material__label--active');
this._helper.classList.add('text-input--material__label--inactive');
}else{
this._helper.classList.remove('text-input--material__label--inactive');
this._helper.classList.add('text-input--material__label--active');
}
}
It probably could be a bit cleaner, but it does the job for me.
There are two lines a little further down that read “contentReady(this, function () {”. In those sections, I add the following, respectively:
contentReady(this, function () {
_this2._input.addEventListener('input', _this2._boundOnInput);
_this2._input.addEventListener('focusin', _this2._boundOnFocusin);
_this2._input.addEventListener('focusout', _this2._boundOnFocusout);//<-- - added this line
});
contentReady(this, function () {
_this3._input.removeEventListener('input', _this3._boundOnInput);
_this3._input.removeEventListener('focusin', _this3._boundOnFocusin);
_this3._input.removeEventListener('focusout', _this3._boundOnFocusout);//<--- added this line
});
[onsen-css-components.css]
I modified this css file a little bit. I based these modifications off my F12ing the Google login card using Chrome. I also added a new “inactive” style.
/* modified this style */
.text-input--material__label--active {
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
color: rgb(66, 133, 244);
-webkit-transform: translate(0, -75%) scale(0.75);
transform: translate(0, -75%) scale(0.75);
-webkit-transform-origin: left top;
transform-origin: left top;
transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in;
transition: transform 0.15s ease-in, color 0.15s ease-in;
transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in;
}
/* added this style */
.text-input--material__label--inactive {
color: rgba(0, 0, 0, .38);
-webkit-transform: translate(0, 0%) scale(1);
transform: translate(0, 0%) scale(1);
-webkit-transform-origin: left top;
transform-origin: left top;
transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in;
transition: transform 0.15s ease-in, color 0.15s ease-in;
transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in;
}
I think I got it all. I haven’t done extensive testing, but so far so good. Hope this helps someone out who might be looking for that one step closer to Material behavior. Again, I’m just a tinkerer, so there is most definitely a better way to do this. But this works for me.