mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Fix twitchy defaults on number inputs
This commit is contained in:
parent
c936e36590
commit
66b610e201
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Stack, Text, NumberInput } from "@mantine/core";
|
import { Stack, Text, NumberInput } from "@mantine/core";
|
||||||
|
|
||||||
interface NumberInputWithUnitProps {
|
interface NumberInputWithUnitProps {
|
||||||
@ -20,14 +20,26 @@ const NumberInputWithUnit = ({
|
|||||||
max,
|
max,
|
||||||
disabled = false
|
disabled = false
|
||||||
}: NumberInputWithUnitProps) => {
|
}: NumberInputWithUnitProps) => {
|
||||||
|
const [localValue, setLocalValue] = useState<number | string>(value);
|
||||||
|
|
||||||
|
// Sync local value when external value changes
|
||||||
|
useEffect(() => {
|
||||||
|
setLocalValue(value);
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
const handleBlur = () => {
|
||||||
|
onChange(localValue);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack gap="xs" style={{ flex: 1 }}>
|
<Stack gap="xs" style={{ flex: 1 }}>
|
||||||
<Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
<Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
<NumberInput
|
<NumberInput
|
||||||
value={value}
|
value={localValue}
|
||||||
onChange={onChange}
|
onChange={setLocalValue}
|
||||||
|
onBlur={handleBlur}
|
||||||
min={min}
|
min={min}
|
||||||
max={max}
|
max={max}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user