From f5cab1d4102e203fc4b169579bcc3f7691beb950 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Wed, 1 Nov 2023 15:54:28 +0100
Subject: [PATCH]  #676 Fix cursor moves to end of input when typing in tables

---
 .../src/components/forms/InputBoolean.tsx          | 14 +++-----------
 .../src/components/forms/InputNumber.tsx           |  4 +++-
 .../src/components/forms/InputSlug.tsx             |  1 +
 .../src/components/forms/InputString.tsx           |  2 +-
 .../data-browser/src/views/TablePage/TableCell.tsx |  5 +++--
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/browser/data-browser/src/components/forms/InputBoolean.tsx b/browser/data-browser/src/components/forms/InputBoolean.tsx
index d80888828..25dccedc5 100644
--- a/browser/data-browser/src/components/forms/InputBoolean.tsx
+++ b/browser/data-browser/src/components/forms/InputBoolean.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { useBoolean } from '@tomic/react';
 import { InputProps } from './ResourceField';
-import { ErrMessage, InputStyled } from './InputStyles';
+import { ErrMessage } from './InputStyles';
+import { Checkbox } from './Checkbox';
 
 export default function InputBoolean({
   resource,
@@ -15,18 +16,9 @@ export default function InputBoolean({
     commit,
   });
 
-  function handleUpdate(e: React.ChangeEvent<HTMLInputElement>) {
-    setValue(e.target.checked);
-  }
-
   return (
     <>
-      <InputStyled
-        type='checkbox'
-        checked={!!value}
-        onChange={handleUpdate}
-        {...props}
-      />
+      <Checkbox checked={!!value} onChange={setValue} {...props} />
       {err && <ErrMessage>{err.message}</ErrMessage>}
     </>
   );
diff --git a/browser/data-browser/src/components/forms/InputNumber.tsx b/browser/data-browser/src/components/forms/InputNumber.tsx
index 0342baa75..59b3948e2 100644
--- a/browser/data-browser/src/components/forms/InputNumber.tsx
+++ b/browser/data-browser/src/components/forms/InputNumber.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useNumber } from '@tomic/react';
+import { Datatype, useNumber } from '@tomic/react';
 import { InputProps } from './ResourceField';
 import { ErrMessage, InputStyled, InputWrapper } from './InputStyles';
 
@@ -12,6 +12,7 @@ export default function InputNumber({
   const [err, setErr] = useState<Error | undefined>(undefined);
   const [value, setValue] = useNumber(resource, property.subject, {
     handleValidationError: setErr,
+    validate: false,
     commit,
   });
 
@@ -33,6 +34,7 @@ export default function InputNumber({
           placeholder='Enter a number...'
           type='number'
           value={value === undefined ? '' : Number.isNaN(value) ? '' : value}
+          step={property.datatype === Datatype.INTEGER ? 1 : 'any'}
           onChange={handleUpdate}
           {...props}
         />
diff --git a/browser/data-browser/src/components/forms/InputSlug.tsx b/browser/data-browser/src/components/forms/InputSlug.tsx
index 0103bc094..d20801e52 100644
--- a/browser/data-browser/src/components/forms/InputSlug.tsx
+++ b/browser/data-browser/src/components/forms/InputSlug.tsx
@@ -17,6 +17,7 @@ export default function InputSlug({
 
   const [value, setValue] = useString(resource, property.subject, {
     handleValidationError: setErr,
+    validate: false,
     commit,
   });
 
diff --git a/browser/data-browser/src/components/forms/InputString.tsx b/browser/data-browser/src/components/forms/InputString.tsx
index e5c178196..772396967 100644
--- a/browser/data-browser/src/components/forms/InputString.tsx
+++ b/browser/data-browser/src/components/forms/InputString.tsx
@@ -13,9 +13,9 @@ export default function InputString({
   ...props
 }: InputProps): JSX.Element {
   const [err, setErr, onBlur] = useValidation();
-
   const [value, setValue] = useString(resource, property.subject, {
     commit,
+    validate: false,
   });
 
   function handleUpdate(event: React.ChangeEvent<HTMLInputElement>): void {
diff --git a/browser/data-browser/src/views/TablePage/TableCell.tsx b/browser/data-browser/src/views/TablePage/TableCell.tsx
index 6e3f86d64..a7c542c2e 100644
--- a/browser/data-browser/src/views/TablePage/TableCell.tsx
+++ b/browser/data-browser/src/views/TablePage/TableCell.tsx
@@ -52,6 +52,7 @@ function useIsEditing(row: number, column: number) {
 const valueOpts = {
   commitDebounce: 0,
   commit: false,
+  validate: false,
 };
 
 export function TableCell({
@@ -105,7 +106,7 @@ export function TableCell({
 
       save();
     },
-    [setValue, setCreatedAt, createdAt, value, resource, property],
+    [setValue, setCreatedAt, createdAt, resource, property, save],
   );
 
   const handleEnterEditModeWithCharacter = useCallback(
@@ -139,7 +140,7 @@ export function TableCell({
           resource={resource}
         />
       ) : (
-        <React.Fragment key={`${value}`}>
+        <React.Fragment>
           <Editor.Display
             value={value}
             onChange={onChange}