Select all ordinal field on focus

kavigupta · Sep 7, 2024 · b510b19 · b510b19
1 parent 1060b68
commit b510b19
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/react/src/components/table.tsx b/react/src/components/table.tsx
@@ -548,11 +548,21 @@ function EditableNumber(props: { number: number, onNewNumber: (number: number) =
 
     const handleSubmit = (): void => {
         const number = parseInt(contentEditable.current!.innerText)
-        if (!Number.isNaN(number)) {
+        if (!Number.isNaN(number) && number !== props.number) {
             props.onNewNumber(number)
         }
     }
 
+    const selectAll = (): void => {
+        setTimeout(() => {
+            const range = document.createRange()
+            range.selectNodeContents(contentEditable.current!)
+            const selection = window.getSelection()
+            selection?.removeAllRanges()
+            selection?.addRange(range)
+        }, 0)
+    }
+
     return (
         <ContentEditable
             className="editable_number"
@@ -569,6 +579,7 @@ function EditableNumber(props: { number: number, onNewNumber: (number: number) =
             onBlur={handleSubmit}
             tagName="span" // Use a custom HTML tag (uses a div by default)
             inputMode="decimal"
+            onFocus={selectAll}
         />
     )
 };