diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index d54dc5e..a9efc79 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -325,6 +325,8 @@ const SettingsOverlay: Component = () => {
required
type="number"
label="Standard Einzelpreis"
+ min="0"
+ step="0.01"
value={state.defaultItemPrice}
onInput={(evt) =>
setState(
@@ -332,6 +334,7 @@ const SettingsOverlay: Component = () => {
parseFloat(evt.currentTarget.value) || 0
)
}
+ onBlur={resetInput(0)}
/>
diff --git a/src/components/Settings/Positions.tsx b/src/components/Settings/Positions.tsx
index ba40987..958027f 100644
--- a/src/components/Settings/Positions.tsx
+++ b/src/components/Settings/Positions.tsx
@@ -22,8 +22,8 @@ import DeleteIcon from "~icons/carbon/trash-can";
import DragVerticalIcon from "~icons/carbon/drag-vertical";
import PositionSettingsIcon from "~icons/carbon/settings-adjust";
import { Checkbox, TextArea, TextInput } from "../Form";
-import { parseOptionalFloat } from "~/util";
import { MarkdownHelpLabel } from "../Markdown";
+import { createOptionalNumberInputHandler } from "~/util";
export const PositionsSettings: Component = () => {
const [state, setState] = useContext(StoreContext)!;
@@ -295,25 +295,19 @@ export const PositionsSettings: Component = () => {
{
- setState(
- "positions",
- idx(),
- "itemPrice",
- parseOptionalFloat(e.currentTarget.value)
- );
- }}
+ onInput={createOptionalNumberInputHandler((v) =>
+ setState("positions", idx(), "itemPrice", v)
+ )}
/>
{
+ onInput={createOptionalNumberInputHandler((v) =>
setState(
"positions",
idx(),
"fixedDiscountPrice",
- parseOptionalFloat(e.currentTarget.value)
+ v
)
- }
+ )}
/>
diff --git a/src/util.tsx b/src/util.tsx
index 5e92b79..bdbfd36 100644
--- a/src/util.tsx
+++ b/src/util.tsx
@@ -5,13 +5,6 @@ import { JSX } from "solid-js";
export const sleep = (timeout: number) =>
new Promise((res) => setTimeout(res, timeout));
-export const parseOptionalFloat = (text: string) => {
- const result = parseFloat(text);
- if (Number.isNaN(result)) return undefined;
-
- return result;
-};
-
// Source: https://stackoverflow.com/a/34591063
export const roundToStep = (value: number, step = 1.0) => {
const inv = new Big(1.0).div(step);
@@ -88,3 +81,18 @@ export const onClickFocus: JSX.EventHandlerUnion<
};
export const externalLink = { target: "_blank", rel: "noopener" };
+
+export const createOptionalNumberInputHandler = (
+ onInput: (v: number | undefined) => void
+) => {
+ return (e: InputEvent & { currentTarget: HTMLInputElement }) => {
+ if (e.currentTarget.validity.badInput) {
+ return;
+ }
+
+ const value =
+ e.currentTarget.value == "" ? undefined : e.currentTarget.valueAsNumber;
+
+ onInput(value);
+ };
+};