set lat and lon inputs to number type

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>
   )
 }

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>