Android float not quite right

[Michael Redwine]

Hi there.

I am trying to change the behavior of the ons-input (with float) element in Android view. Currently, it only floats when text in entered. I’ve not researched the Material specifications in depth, but from my observations using Android, apps that incorporate Material design behave differently: the placeholder floats when the input receives focus (not just when text is entered), stays “floated” when the input loses focus and has text entered, and “defloats” when the input loses focus and has not had any text entered.

I would like to change Onsen’s behavior to match this. Coming from a hobbyist-jQM background, and liking to tweak things here and there, I started going through various js/css files, but I can’t figure out where this behavior is programmed. If someone could point me in the right direction, I’d greatly appreciate it!

[Michael Redwine]

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.