Fixed number inputs being janky

Soryyyn · Feb 27, 2023 · 2cd8613 · 2cd8613
1 parent 5546e0e
commit 2cd8613
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/src/renderer/components/NewFarm/BasicInfoTab.tsx b/src/renderer/components/NewFarm/BasicInfoTab.tsx
@@ -46,18 +46,13 @@ export default function BasicInfoTab({ data, onChange }: Props) {
             />
             <Select
                 label="Farming location (stream site)"
-                value={basicInfo.type}
+                value={
+                    api.selections.FarmingLocation.find(
+                        (select) => select.value === basicInfo.type
+                    )?.display ?? ''
+                }
                 fullWidth
-                options={[
-                    {
-                        display: 'Twitch',
-                        value: 'twitch'
-                    },
-                    {
-                        display: 'YouTube',
-                        value: 'youtube'
-                    }
-                ]}
+                options={api.selections.FarmingLocation}
                 onChange={(changed) => {
                     setBasicInfo({
                         ...basicInfo,
@@ -66,6 +61,7 @@ export default function BasicInfoTab({ data, onChange }: Props) {
                 }}
             />
             <NumberInput
+                key="schedule-input"
                 label="Farming schedule (in minutes)"
                 value={basicInfo.schedule}
                 withButtons

diff --git a/src/renderer/components/NewFarm/ConditionsTab.tsx b/src/renderer/components/NewFarm/ConditionsTab.tsx
@@ -30,7 +30,11 @@ export default function ConditionsTab({ data, onChange }: Props) {
         <div className="flex flex-col gap-4">
             <Select
                 label="Type of condition"
-                value={conditionsInfo.type}
+                value={
+                    api.selections.FarmConditionSelect.find(
+                        (select) => select.value === conditionsInfo.type
+                    )?.display ?? ''
+                }
                 fullWidth
                 options={api.selections.FarmConditionSelect}
                 onChange={(changed) =>
@@ -48,6 +52,7 @@ export default function ConditionsTab({ data, onChange }: Props) {
                     <span className="bg-pepper-400 h-0.5 w-[98%] rounded-full self-center" />
 
                     <NumberInput
+                        key="amount-to-fulfill-input"
                         label="Amount to fulfill in timespan (in hours)"
                         value={conditionsInfo.amountToFulFill ?? 4}
                         min={1}
@@ -63,6 +68,7 @@ export default function ConditionsTab({ data, onChange }: Props) {
                     />
 
                     <NumberInput
+                        key="buffer-input"
                         label="Buffer for fulfillment (in minutes)"
                         value={conditionsInfo.buffer ?? 30}
                         min={0}

diff --git a/src/renderer/components/Settings/Setting.tsx b/src/renderer/components/Settings/Setting.tsx
@@ -57,6 +57,7 @@ export default function Setting({ setting, onChange }: Props) {
             ) {
                 return (
                     <NumberInput
+                        key={`${setting.id}-number-input`}
                         value={
                             ((setting.value as SettingValueWithSpecial)
                                 .value as number) ?? setting.value

diff --git a/src/renderer/components/global/Inputs/NumberInput.tsx b/src/renderer/components/global/Inputs/NumberInput.tsx
@@ -1,6 +1,5 @@
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import clsx from 'clsx';
-import { uniqueId } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import Icon from '../Icon';
 
@@ -24,25 +23,16 @@ export default function NumberInput({
     fullWidth,
     disabled,
     withButtons,
-    inputWidth,
     onChange
 }: Props) {
     const [inputValue, setInputValue] = useState<number>(value);
 
     useEffect(() => {
-        if (value < 0) setInputValue(0);
-
-        if (value < min) {
-            setInputValue(min);
-        } else if (value > max) {
-            setInputValue(max);
-        } else {
-            onChange(inputValue);
-        }
+        onChange(inputValue);
     }, [inputValue]);
 
     return (
-        <div className="flex flex-col gap-2 grow" key={uniqueId()}>
+        <div className="flex flex-col gap-2 grow">
             {label && (
                 <div className="flex flex-row leading-none gap-1">
                     <span className="text-snow-300">{label}</span>
@@ -77,12 +67,20 @@ export default function NumberInput({
                             'hover:bg-pepper-800 focus:bg-pepper-800': !disabled
                         }
                     )}
+                    type="number"
                     disabled={disabled}
                     value={value}
-                    type="number"
-                    onInput={(event) => {
-                        setInputValue(parseInt(event.currentTarget.value));
+                    onChange={(event) => {
+                        const { value, min, max } = event.target;
+                        const adjustedValue = Math.max(
+                            Number(min),
+                            Math.min(Number(max), Number(value))
+                        );
+
+                        setInputValue(adjustedValue);
                     }}
+                    min={min}
+                    max={max}
                 />
                 {withButtons && (
                     <button