Dean/table

meerkat/interactive/app/src/lib/component/core/number/Number.svelte

@@ -6,12 +6,40 @@
 	export let precision: number = 3;
 	export let percentage: boolean = false;
 	export let editable: boolean = false;
+	export let focused: boolean = false;
 	export let classes: string = '';
 
 	const cellEdit: CallableFunction = getContext('cellEdit');
 
+	let editableCell: HTMLDivElement;
+
+	$: setFocus(focused);
+
+	function setFocus(focus: boolean) {
+		if (!editableCell) return;
+
+		if (!focus) {
+			editableCell.blur();
+		} else {
+			editableCell.focus();
+
+			// Set the cursor to the end of the div. From
+			// https://stackoverflow.com/a/3866442. Supported on Firefox,
+			// Chrome, Opera, Safari, IE 9+
+			let range = document.createRange();
+			range.selectNodeContents(editableCell);
+			range.collapse(false);
+
+			let selection = window.getSelection();
+			if (selection) {
+				selection.removeAllRanges();
+				selection.addRange(range);
+			}
+		}
+	}
+
 	let invalid = false;
-	let showInvalid = false;
+	let invalidCount = 0;
 
 	if (dtype === 'auto') {
 		// The + operator converts a string or number to a number if possible
@@ -39,15 +67,17 @@
 </script>
 
 {#if editable}
-	<input
-		class={'input w-full' + (invalid && ' outline-red-500')}
-		class:invalid={showInvalid}
-		bind:value={data}
-		on:input={() => (invalid = data !== '' && data !== 'NaN' && isNaN(data))}
-		on:change={() => {
+	<div
+		class={classes + (invalid ? ' outline-red-500' : ' outline-none')}
+		class:invalid={invalidCount > 0}
+		contenteditable="true"
+		bind:innerHTML={data}
+		bind:this={editableCell}
+		on:input={() => {
+			invalid = data !== '' && data !== 'NaN' && isNaN(data);
 			if (invalid) {
-				showInvalid = true;
-				setTimeout(() => (showInvalid = false), 1000);
+				invalidCount++;
+				setTimeout(() => invalidCount--, 400);
 			} else {
 				cellEdit(data === '' ? 0 : dtype === 'string' ? data : +data);
 			}
@@ -76,6 +106,6 @@
 	}
 
 	.invalid {
-		animation: shake 0.2s ease-in-out 0s 2;
+		animation: shake 0.2s ease-in-out 0s infinite;
 	}
 </style>

meerkat/interactive/app/src/lib/component/core/number/__init__.py

@@ -10,3 +10,4 @@ class Number(Component):
     percentage: bool = False
     classes: str = ""
     editable: bool = False
+    focused: bool = False