#676 Fix cursor moves to end of input when typing in tables

Author: Polleps

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>}
     </>
   );

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}
         />

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,
   });
 

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 {

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}