fix: using type text instead number for avoid region issue (#3538)

This commit is contained in:
Faisal Amir 2024-09-04 22:58:01 +07:00 committed by GitHub
parent d4c014da1d
commit 28c6ba10f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -28,8 +28,10 @@ const SliderRightPanel = ({
onValueChanged,
}: Props) => {
const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
const [val, setVal] = useState(value.toString())
useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
return (
<div className="flex flex-col">
<div className="mb-3 flex items-center gap-x-2">
@ -48,7 +50,10 @@ const SliderRightPanel = ({
<div className="relative w-full">
<Slider
value={[value]}
onValueChange={(e) => onValueChanged?.(e[0])}
onValueChange={(e) => {
onValueChanged?.(e[0])
setVal(e[0].toString())
}}
min={min}
max={max}
step={step}
@ -63,24 +68,29 @@ const SliderRightPanel = ({
open={showTooltip.max || showTooltip.min}
trigger={
<Input
type="number"
type="text"
className="-mt-4 h-8 w-[60px]"
min={min}
max={max}
value={String(value)}
value={val}
disabled={disabled}
textAlign="right"
onBlur={(e) => {
if (Number(e.target.value) > Number(max)) {
onValueChanged?.(Number(max))
setVal(max.toString())
setShowTooltip({ max: true, min: false })
} else if (Number(e.target.value) < Number(min)) {
onValueChanged?.(Number(min))
setVal(min.toString())
setShowTooltip({ max: false, min: true })
}
}}
onChange={(e) => {
onValueChanged?.(Number(e.target.value))
onValueChanged?.(e.target.value)
if (/^\d*\.?\d*$/.test(e.target.value)) {
setVal(e.target.value)
}
}}
/>
}