From 00949cd74549988539932515edc9de998357fe26 Mon Sep 17 00:00:00 2001
From: Patrik Kullman <patrik.kullman@gmail.com>
Date: Tue, 19 Mar 2019 15:33:55 +0100
Subject: [PATCH] Check if label should float based on validity (#271)

* Check if label should float based on validity

Number inputs can have allowed characters that aren't numbers (-,e) and won't
trigger a value change and thus not float the label.

However, the validity will report badInput so we can trigger a label float by
setting it to something truthy but still not visible.

Fixed in paper-input 3.x

See #229
RM Solves #19930

* rename handler, use input event, add test

* update test to trigger handler

Doesn't actually test the behavior, can't find a way to properly
emulate a keypress.

* onBadInputFloatLabel - add test for bad Events

Signed-off-by: Patrik Kullman <patrik.kullman@neovici.se>
---
 cosmoz-omnitable-column-number.html | 25 +++++++++++++++++++++++--
 test/range.html                     | 28 ++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/cosmoz-omnitable-column-number.html b/cosmoz-omnitable-column-number.html
index f7bddf15..b5d5caf2 100644
--- a/cosmoz-omnitable-column-number.html
+++ b/cosmoz-omnitable-column-number.html
@@ -6,6 +6,7 @@
 
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../neon-animation/web-animations.html">
 
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 
@@ -29,10 +30,10 @@
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
-					<paper-input type="number" label="[[ _('From', t) ]]" value="{{ _filterInput.min }}"
+					<paper-input type="number" label="[[ _('From', t) ]]" value="{{ _filterInput.min }}" on-input="onBadInputFloatLabel"
 						min="[[ _toInputString(_limit.fromMin) ]]" max="[[ _toInputString(_limit.fromMax) ]]">
 					</paper-input>
-					<paper-input type="number" label="[[ _('To', t) ]]" value="{{ _filterInput.max }}"
+					<paper-input type="number" label="[[ _('To', t) ]]" value="{{ _filterInput.max }}" on-input="onBadInputFloatLabel"
 						min="[[ _toInputString(_limit.toMin) ]]" max="[[ _toInputString(_limit.toMax) ]]">
 					</paper-input>
 				</div>
@@ -105,6 +106,26 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 				return new Intl.NumberFormat(locale || undefined, options);
 			}
 
+			/**
+			 * Check if label should float based on validity
+			 *
+			 * Number inputs can have allowed characters that aren't numbers (-,e) and won't
+			 * trigger a value change and thus not float the label.
+			 * However, the validity will report badInput so we can trigger a label float by
+			 * setting it to something truthy but still not visible.
+			 * Fixed in paper-input 3.x
+			 *
+			 * @param {Event} event KeyboardEvent
+			 * @returns {void}
+			 */
+			onBadInputFloatLabel(event) {
+				const paperInput = event.currentTarget;
+				if (paperInput == null ||  paperInput.tagName !== 'PAPER-INPUT') {
+					return;
+				}
+				paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : '';
+			}
+
 			/**
 			 *   Get the comparable value of an item.
 			 *
diff --git a/test/range.html b/test/range.html
index ec901177..05718b8b 100644
--- a/test/range.html
+++ b/test/range.html
@@ -207,6 +207,34 @@
 				test('getString displays 46.768 as 46.77', () => {
 					assert.equal(column.getString({ age: 46.768 }), 46.77);
 				});
+
+				test('float label on invalid input', done => {
+					const numberHeader = omnitable.root.querySelector('.number-header-cell'),
+						filterMenu = numberHeader.querySelector('paper-dropdown-menu'),
+						menuContent = numberHeader.querySelector('.dropdown-content'),
+						isFloating = element => element.$.container.$.labelAndInputContainer.classList.contains('label-is-floating'),
+						isVisible = element => element.offsetWidth > 0 && element.offsetHeight > 0,
+						inputEvent = new InputEvent('input');
+					assert.isFalse(isVisible(menuContent));
+					filterMenu.click();
+					const [from, to] = filterMenu.querySelectorAll('paper-input');
+					assert.isFalse(isFloating(from));
+					assert.isFalse(isFloating(to));
+					from.value = 'e';
+					to.value = 'e';
+					setTimeout(() => { // needed for native input to appear
+						from.dispatchEvent(inputEvent);
+						to.dispatchEvent(inputEvent);
+						assert.isTrue(isVisible(menuContent));
+						assert.isTrue(isFloating(from));
+						assert.isTrue(isFloating(to));
+						done();
+					}, 50);
+				});
+
+				test('make sure onBadInputFloatLabel doesn\'t explode', () => {
+					assert.strictEqual(column.onBadInputFloatLabel(new InputEvent('input')), undefined);
+				});
 			});
 
 			suite('amount', () => {