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 <[email protected]>
Neovici · Mar 19, 2019 · 00949cd · 00949cd
1 parent 305994d
commit 00949cd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -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', () => {