fix: add validate input

cardano-foundation · Apr 25, 2024 · 602fa9f · 602fa9f
1 parent 9f58f99
commit 602fa9f
Showing 1 changed file with 49 additions and 9 deletions.
diff --git a/src/components/commons/CustomFilterMultiRange/index.tsx b/src/components/commons/CustomFilterMultiRange/index.tsx
@@ -169,7 +169,25 @@ const CustomFilterMultiRange: React.FC = () => {
             color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light
           }}
           value={minValue || 0}
-          onChange={({ target: { value } }) => setFilterParams({ ...filterParams, [keyOnChangeMin]: +value })}
+          onKeyDown={(event) => {
+            const key = event.key;
+
+            if (
+              !(
+                key === "ArrowLeft" ||
+                key === "ArrowRight" ||
+                key === "Backspace" ||
+                key === "Delete" ||
+                /^\d$/.test(key)
+              )
+            ) {
+              event.preventDefault();
+            }
+          }}
+          onChange={({ target: { value } }) => {
+            const numericValue = value.replace(/[^0-9]/g, "");
+            setFilterParams({ ...filterParams, [keyOnChangeMin]: numericValue });
+          }}
           onKeyPress={handleKeyPress}
         />
         <Box sx={{ width: "15px", height: "2px", background: theme.palette.info.light }}></Box>
@@ -180,8 +198,30 @@ const CustomFilterMultiRange: React.FC = () => {
             width: "100% !important",
             color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light
           }}
-          value={maxValue || maxValueDefault}
-          onChange={({ target: { value } }) => setFilterParams({ ...filterParams, [keyOnChangeMax]: value })}
+          value={maxValue}
+          onKeyDown={(event) => {
+            const key = event.key;
+
+            if (
+              !(
+                key === "ArrowLeft" ||
+                key === "ArrowRight" ||
+                key === "Backspace" ||
+                key === "Delete" ||
+                /^\d$/.test(key)
+              )
+            ) {
+              event.preventDefault();
+            }
+          }}
+          onChange={({ target: { value } }) => {
+            const numericValue = value.replace(/[^0-9]/g, "");
+            Number(numericValue) <= maxValueDefault &&
+              setFilterParams({
+                ...filterParams,
+                [keyOnChangeMax]: Number(numericValue)
+              });
+          }}
           onKeyPress={handleKeyPress}
         />
       </Box>
@@ -309,7 +349,7 @@ const CustomFilterMultiRange: React.FC = () => {
                   </Box>
                   {groupInputRange(
                     filterParams.minPoolSize || 0,
-                    filterParams.maxPoolSize || 0,
+                    filterParams.maxPoolSize ?? (initParams.maxPoolSize || 0),
                     "minPoolSize",
                     "maxPoolSize",
                     initParams.maxPoolSize
@@ -358,7 +398,7 @@ const CustomFilterMultiRange: React.FC = () => {
                   </Box>
                   {groupInputRange(
                     filterParams.minPledge || 0,
-                    filterParams.maxPledge || 0,
+                    filterParams.maxPledge ?? (initParams.maxPledge || 0),
                     "minPledge",
                     "maxPledge",
                     initParams.maxPledge
@@ -414,7 +454,7 @@ const CustomFilterMultiRange: React.FC = () => {
                   </Box>
                   {groupInputRange(
                     filterParams.minSaturation || 0,
-                    filterParams.maxSaturation || 0,
+                    filterParams.maxSaturation ?? (initParams.maxSaturation || 0),
                     "minSaturation",
                     "maxSaturation",
                     initParams.maxSaturation
@@ -470,7 +510,7 @@ const CustomFilterMultiRange: React.FC = () => {
                   </Box>
                   {groupInputRange(
                     filterParams.minBlockLifetime || 0,
-                    filterParams.maxBlockLifetime || 0,
+                    filterParams.maxBlockLifetime ?? (initParams.maxBlockLifetime || 0),
                     "minBlockLifetime",
                     "maxBlockLifetime",
                     initParams.maxBlockLifetime
@@ -533,7 +573,7 @@ const CustomFilterMultiRange: React.FC = () => {
                       </Box>
                       {groupInputRange(
                         filterParams.minGovParticipationRate || 0,
-                        filterParams.maxGovParticipationRate || 0,
+                        filterParams.maxGovParticipationRate ?? (initParams.maxGovParticipationRate || 0),
                         "minGovParticipationRate",
                         "maxGovParticipationRate",
                         initParams.maxGovParticipationRate
@@ -591,7 +631,7 @@ const CustomFilterMultiRange: React.FC = () => {
                       </Box>
                       {groupInputRange(
                         filterParams.minVotingPower || 0,
-                        filterParams.maxVotingPower || 0,
+                        filterParams.maxVotingPower ?? (initParams.maxVotingPower || 0),
                         "minVotingPower",
                         "maxVotingPower",
                         initParams.maxVotingPower