From d49230487025448ae4a08dbbcfbe8c4cc9721c41 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@proton.me>
Date: Thu, 29 Dec 2022 19:59:06 -0500
Subject: [PATCH] set lat and lon inputs to number type

---
 src/Popup/Components/DebouncedInput.tsx | 10 +++++++++-
 src/Popup/Pages/LocationPage/index.tsx  |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Popup/Components/DebouncedInput.tsx b/src/Popup/Components/DebouncedInput.tsx
index c96dac0..508120b 100644
--- a/src/Popup/Components/DebouncedInput.tsx
+++ b/src/Popup/Components/DebouncedInput.tsx
@@ -10,6 +10,7 @@ interface DebouncedInputProps {
   setValue: Dispatch<SetStateAction<string>>
   onChange: () => void
   mb?: string
+  type?: string
 }
 
 const DebouncedInput = ({
@@ -19,6 +20,7 @@ const DebouncedInput = ({
   setValue,
   onChange,
   mb,
+  type = 'text',
 }: DebouncedInputProps) => {
   const debouncedChangeHandler = useMemo(
     () =>
@@ -38,7 +40,13 @@ const DebouncedInput = ({
   return (
     <Box>
       <Label htmlFor={name}>{title}</Label>
-      <Input name={name} value={value} onChange={changeInputText} mb={mb} />
+      <Input
+        name={name}
+        value={value}
+        onChange={changeInputText}
+        mb={mb}
+        type={type}
+      />
     </Box>
   )
 }
diff --git a/src/Popup/Pages/LocationPage/index.tsx b/src/Popup/Pages/LocationPage/index.tsx
index ee5868f..7a0b83f 100644
--- a/src/Popup/Pages/LocationPage/index.tsx
+++ b/src/Popup/Pages/LocationPage/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, ChangeEvent, useCallback } from 'react'
-import { Box, Button, Flex, Label, Radio, Select } from 'theme-ui'
+import { Box, Button, Flex, Label, Select } from 'theme-ui'
 import Page from '../../Components/Page'
 import Checkbox from '../../Components/CheckBox'
 import DebouncedInput from '../../Components/DebouncedInput'
@@ -231,6 +231,7 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             value={lat}
             setValue={setLatitude}
             onChange={changeInputText}
+            type="number"
           />
           <DebouncedInput
             name="lon"
@@ -239,6 +240,7 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             setValue={setLongitude}
             onChange={changeInputText}
             mb="12px"
+            type="number"
           />
         </Flex>
       </Box>