Handle negative amount input

moneymgr_web/src/widgets/NewMovementWidget.tsx

@@ -2,7 +2,7 @@ import { IconButton, Tooltip, Typography } from "@mui/material";
 import { Account } from "../api/AccountApi";
 import { DateInput } from "./forms/DateInput";
 import { time } from "../utils/DateUtils";
-import React from "react";
+import React, { useRef } from "react";
 import { TextInput } from "./forms/TextInput";
 import { ServerApi } from "../api/ServerApi";
 import AddIcon from "@mui/icons-material/Add";
@@ -17,6 +17,8 @@ export function NewMovementWidget(p: {
   const snackbar = useSnackbar();
   const alert = useAlert();
 
+  const dateInputRef = useRef<HTMLInputElement>(null);
+
   const [movTime, setMovTime] = React.useState<number | undefined>(time());
   const [label, setLabel] = React.useState<string | undefined>("");
   const [amount, setAmount] = React.useState<number | undefined>(0);
@@ -49,6 +51,9 @@ export function NewMovementWidget(p: {
 
       setLabel("");
       setAmount(0);
+
+      // Give back focus to date input
+      dateInputRef.current?.querySelector("input")?.focus();
     } catch (e) {
       console.error(`Failed to create movement!`, e);
       alert(`Failed to create movement! ${e}`);
@@ -63,6 +68,7 @@ export function NewMovementWidget(p: {
       <Typography style={{ marginRight: "10px" }}>New movement</Typography>
       &nbsp;
       <DateInput
+        ref={dateInputRef}
         autoFocus
         editable
         style={{ flex: 1, maxWidth: "140px" }}
@@ -81,11 +87,11 @@ export function NewMovementWidget(p: {
       &nbsp;
       <TextInput
         editable
-        type="number"
+        type="text"
         placeholder="Amount"
         style={{ flex: 1, maxWidth: "110px" }}
-        value={String(amount)}
+        value={Number.isNaN(amount) ? "-" : String(amount)}
-        onValueChange={(a) => setAmount(Number(a))}
+        onValueChange={(a) => setAmount(a === "-" ? NaN : Number(a))}
       />
       <Tooltip title="Add new movement">
         <IconButton onClick={submit}>

moneymgr_web/src/widgets/forms/DateInput.tsx

@@ -2,6 +2,7 @@ import { DatePicker } from "@mui/x-date-pickers";
 import { dateToTime, timeToDate } from "../../utils/DateUtils";
 
 export function DateInput(p: {
+  ref?: React.Ref<HTMLInputElement>;
   editable?: boolean;
   autoFocus?: boolean;
   label?: string;
@@ -14,7 +15,10 @@ export function DateInput(p: {
       autoFocus={p.autoFocus}
       readOnly={p.editable === false}
       label={p.label}
-      slotProps={{ textField: { variant: "standard", style: p.style } }}
+      slotProps={{
+        field: { ref: p.ref },
+        textField: { variant: "standard", style: p.style },
+      }}
       value={timeToDate(p.value)}
       onChange={(v) => {
         try {