fix(toolbar): Select added digits if the document size input changes …

…from zero while editing

Previously, trying to change the value of a dimension input that ends in
0s (e.g. from 100 to 200) by deleting and replacing the first digit
caused the input's value to be reset to 100 (as 0 is an invalid
dimension).

This commit works around the issue by selecting the changed digit(s) at
the beginning of the input.

This should fix #58 (in many cases).

packages/js-draw/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -245,7 +245,32 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 			return {
 				setValue: (value: number) => {
-					input.value = value.toString();
+					// Slightly improve the case where the user tries to change the
+					// first digit of a dimension like 600.
+					//
+					// As changing the value also gives the image zero size (which is unsupported,
+					// .setValue is called immediately). We work around this by trying to select
+					// the added/changed digits.
+					//
+					// See https://github.com/personalizedrefrigerator/js-draw/issues/58.
+					if (document.activeElement === input && input.value.match(/^0*$/)) {
+						// We need to switch to type="text" and back to type="number" because
+						// number inputs don't support selection.
+						//
+						// See https://stackoverflow.com/q/22381837
+						const originalValue = input.value;
+
+						input.type = 'text';
+						input.value = value.toString();
+
+						// Select the added digits
+						const lengthToSelect = Math.max(1, input.value.length - originalValue.length);
+						input.setSelectionRange(0, lengthToSelect);
+
+						input.type = 'number';
+					} else {
+						input.value = value.toString();
+					}
 				},
 				setIsAutomaticSize: (automatic: boolean) => {
 					input.disabled = automatic;