fix(data-grid): fix inline number cell editing (#1073)

* fix(data-grid): fix NumberCell only allowing one character at a time

- Track isEditing transition with ref to only focus on edit start
- Remove select() call that was selecting all content on every keystroke
- type=number inputs don't support setSelectionRange, so just focus

* style(data-grid): hide number input spinner controls

Add CSS to hide browser default spinner/stepper buttons on number inputs
for a cleaner Airtable-like UX

* chore: orgnaize

Author: sadmann7

public/r/data-grid.json

@@ -384,12 +384,15 @@ export function NumberCell<TData>({
   const [value, setValue] = React.useState(String(initialValue ?? ""));
   const inputRef = React.useRef<HTMLInputElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+
   const cellOpts = cell.column.columnDef.meta?.cell;
   const numberCellOpts = cellOpts?.variant === "number" ? cellOpts : null;
   const min = numberCellOpts?.min;
   const max = numberCellOpts?.max;
   const step = numberCellOpts?.step;
 
+  const prevIsEditingRef = React.useRef(isEditing);
+
   const prevInitialValueRef = React.useRef(initialValue);
   if (initialValue !== prevInitialValueRef.current) {
     prevInitialValueRef.current = initialValue;
@@ -449,9 +452,12 @@ export function NumberCell<TData>({
   );
 
   React.useEffect(() => {
-    if (isEditing && inputRef.current) {
+    const wasEditing = prevIsEditingRef.current;
+    prevIsEditingRef.current = isEditing;
+
+    // Only focus when we start editing (transition from false to true)
+    if (isEditing && !wasEditing && inputRef.current) {
       inputRef.current.focus();
-      inputRef.current.select();
     }
   }, [isEditing]);
 
@@ -473,15 +479,15 @@ export function NumberCell<TData>({
     >
       {isEditing ? (
         <input
-          ref={inputRef}
           type="number"
+          ref={inputRef}
           value={value}
           min={min}
           max={max}
           step={step}
+          className="w-full border-none bg-transparent p-0 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
           onBlur={onBlur}
           onChange={onChange}
-          className="w-full border-none bg-transparent p-0 outline-none"
         />
       ) : (
         <span data-slot="grid-cell-content">{value}</span>