From 62fd98e075eee323052fd5e4161e39f8eea49fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 26 Aug 2024 10:18:33 -0500
Subject: [PATCH] feat: responsive shell distance input

---
 .../[id]/components/Characteristics/index.tsx       | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 9904a5b7c..1d70a14f6 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -44,6 +44,9 @@ export function Characteristics() {
   const hasImprovedVentilation = useEquipment(102);
   const crewMastery = Duel.use((state) => state.protagonist.crewMastery);
   const [penetrationDistance, setPenetrationDistance] = useState(250);
+  const setPenetrationDistanceDebounced = debounce((value: number) => {
+    setPenetrationDistance(value);
+  }, 500);
 
   const provisions = Duel.use((state) => state.protagonist.provisions);
   const provisionCrewBonus =
@@ -257,9 +260,13 @@ export function Characteristics() {
                   max={500}
                   style={{ flex: 1 }}
                   defaultValue={[penetrationDistance]}
-                  onValueChange={debounce(([value]) => {
-                    setPenetrationDistance(value);
-                  }, 500)}
+                  onValueChange={([value]) => {
+                    setPenetrationDistanceDebounced(value);
+
+                    if (!penetrationDistanceInput.current) return;
+
+                    penetrationDistanceInput.current.value = value.toString();
+                  }}
                 />
                 <TextField.Root
                   style={{ width: 64 }}