fix #207: disallow pasting non-numbers

docs/index.html

@@ -13,7 +13,7 @@
 	<script type="module" src="docs.js"></script>
 	<script type="module" src="zxcvbn.js"></script>
 	<link rel="stylesheet" href="prism-tomorrow.min.css">
-	<script defer data-domain="ui.perfectthings.dev" src="https://plausible.borychowski.net/js/script.hash.outbound-links.js"></script>
+	<script src="http://localhost:35729/livereload.js?snipver=1"></script>
 	<script>window.UI_VERSION='9.5.4';</script>
 </body>
 </html>

src/input/input-math/InputMath.svelte

@@ -26,6 +26,7 @@
 				on:input
 				on:keydown="{onkeydown}"
 				on:change="{onchange}"
+				on:paste="{onpaste}"
 				on:focus
 				on:blur>
 		</div>
@@ -57,7 +58,7 @@ export let inputElement = undefined;
 
 const errorMessageId = guid();
 const dispatch = createEventDispatcher();
-const DECIMAL_SEPARATOR = '.';
+const separator = '.';
 const allowedKeys = [
 	'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
 	'+', '-', '/', '*', '(', ')',
@@ -79,11 +80,19 @@ function onkeydown (e) {
 	}
 	if (allowedKeys.includes(e.key)) return;
 	if (e.metaKey || e.ctrlKey) return;
-	if (e.key === DECIMAL_SEPARATOR) return;
+	if (e.key === 'v' && e.metaKey) return;
+	if (e.key === 'c' && e.metaKey) return;
+	if (e.key === 'x' && e.metaKey) return;
+	if (e.key === separator) return;
 	e.preventDefault();
 }
 
 
+function onpaste (e) {
+	requestAnimationFrame(() => onchange(e));
+}
+
+
 function onchange (e) {
 	const num = parseAmount(value);
 	value = isNaN(num) ? '' : num;
@@ -93,7 +102,7 @@ function onchange (e) {
 
 function parseAmount (amount) {
 	if (!amount) return '';
-	amount = ('' + amount).replace(/[\s,]/g, '');
+	amount = ('' + amount).replace(/[\s,]/g, '').replace(/^-?0+(?=\d)/, '');
 	if (!(/^[+\-\\*/()\d.]+$/i).test(amount)) return 0;
 	if ((/[+\-\\*/.]+/i).test(amount)) {
 		try { amount = eval(amount); }

src/input/input-number/InputNumber.svelte

@@ -24,6 +24,7 @@
 			bind:value="{value}"
 			on:keydown="{onkeydown}"
 			on:change="{onchange}"
+			on:paste="{onpaste}"
 			on:input
 			on:focus
 			on:blur>
@@ -77,17 +78,31 @@ function onkeydown (e) {
 	const val = ('' + value);
 
 	if (allowedKeys.includes(key)) return fireKeydown(e);
+	if (key === 'v' && e.metaKey) return fireKeydown(e);
+	if (key === 'c' && e.metaKey) return fireKeydown(e);
+	if (key === 'x' && e.metaKey) return fireKeydown(e);
 	if (key === '-' && !val.includes('-')) return fireKeydown(e);
 	if (key === separator && !val.includes(separator)) return fireKeydown(e);
 
 	e.preventDefault();
 }
 
 
+function onpaste () {
+	requestAnimationFrame(onchange);
+}
+
+
 function onchange () {
 	const v = ('' + value).replace(separator, '.');
 	const num = parseFloat(v);
-	value = isNaN(num) ? '' : ('' + num).replace('.', separator);
+	if (isNaN(num)) value = '';
+	else {
+		value = value
+			.replace(/^0+(?=\d)/, '')
+			.replace(/[^0-9.-]+/g, '')
+			.replace(/^0+(?=\d)/, '');
+	}
 	dispatch('change', { value });
 }
 </script>

src/utils.js

@@ -181,7 +181,7 @@ export function pluck (obj, keys) {
 
 export function roundAmount (val, precision = 2) {
 	const multiplier = Math.pow(10, precision);
-	return Math.round(val * multiplier) / multiplier;
+	return (Math.round(val * multiplier) / multiplier).toFixed(precision);
 }
 
 

tests/input/InputMath.spec.js

@@ -65,7 +65,7 @@ test('InputMath', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '123456');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('123456');
+	expect(input).toHaveValue('123456.00');
 
 	// test fractions
 	await userEvent.clear(input);
@@ -79,7 +79,7 @@ test('InputMath', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '12+13');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('25');
+	expect(input).toHaveValue('25.00');
 
 	// test fractions addition (inc. js bug when adding 0.1 and 0.2)
 	await userEvent.clear(input);
@@ -91,14 +91,14 @@ test('InputMath', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '10 * 2 - 10 / 2 + 1');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('16');
+	expect(input).toHaveValue('16.00');
 
 
 	// test incorrect input
 	await userEvent.clear(input);
 	await userEvent.type(input, '.0.0');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('0');
+	expect(input).toHaveValue('0.00');
 
 	await userEvent.clear(input);
 	await userEvent.type(input, 'abc');
@@ -108,10 +108,10 @@ test('InputMath', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '1.0000a');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('1');
+	expect(input).toHaveValue('1.00');
 
 	await userEvent.clear(input);
 	await userEvent.type(input, '1e');
 	await userEvent.keyboard('[Enter]');
-	expect(input).toHaveValue('1');
+	expect(input).toHaveValue('1.00');
 });

tests/input/InputNumber.spec.js

@@ -79,7 +79,7 @@ test('InputNumber', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '.0.0');
 	await userEvent.keyboard('[Tab]');
-	expect(input).toHaveValue('0');
+	expect(input).toHaveValue('.00');
 
 	await userEvent.clear(input);
 	await userEvent.type(input, 'abc');
@@ -89,7 +89,7 @@ test('InputNumber', async () => {
 	await userEvent.clear(input);
 	await userEvent.type(input, '1.0000a');
 	await userEvent.keyboard('[Tab]');
-	expect(input).toHaveValue('1');
+	expect(input).toHaveValue('1.0000');
 
 	await userEvent.clear(input);
 	await userEvent.type(input, '1e');

tests/utils.spec.js

@@ -199,7 +199,7 @@ test('utils - pluckOne', () => {
 test('utils - roundAmount', () => {
 	const amount = 123.456;
 	const rounded = utils.roundAmount(amount);
-	expect(rounded).toBe(123.46);
+	expect(rounded).toBe('123.46');
 });