Merge pull request #26 from jambonz/fix/inputnumber

fix double input from keyboard

src/window/phone/dial-pad.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, HStack, VStack } from "@chakra-ui/react";
 import DialPadAudioElements from "./DialPadSoundElement";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 type DialPadProbs = {
-  handleDigitPress: (digit: string) => void;
+  handleDigitPress: (digit: string, fromKeyboard: boolean) => void;
 };
 
 const keySounds = new DialPadAudioElements();
@@ -26,7 +26,7 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
     ) {
       if (isVisibleRef.current) {
         keySounds?.playKeyTone(e.key);
-        handleDigitPress(e.key);
+        handleDigitPress(e.key, true);
       }
     }
   };
@@ -62,7 +62,7 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
                 key={num}
                 onClick={() => {
                   keySounds?.playKeyTone(num);
-                  handleDigitPress(num);
+                  handleDigitPress(num, false);
                 }}
                 size="lg"
                 p={0}

src/window/phone/index.tsx

@@ -99,6 +99,7 @@ export const Phone = ({
   const sipServerAddressRef = useRef("");
   const sipDisplayNameRef = useRef("");
   const [isForceChangeUaStatus, setIsForceChangeUaStatus] = useState(false);
+  const isInputNumberFocusRef = useRef(false);
   const toast = useToast();
 
   useEffect(() => {
@@ -318,8 +319,11 @@ export const Phone = ({
     return `${hours1}:${minutes1}:${seconds1}`;
   }
 
-  const handleDialPadClick = (value: string) => {
-    setInputNumber((prev) => prev + value);
+  const handleDialPadClick = (value: string, fromKeyboad: boolean) => {
+    if (!(isInputNumberFocusRef.current && fromKeyboad)) {
+      setInputNumber((prev) => prev + value);
+    }
+
     if (isSipClientAnswered(callStatus)) {
       sipUA.current?.dtmf(value, undefined);
     }
@@ -564,7 +568,15 @@ export const Phone = ({
             bg="grey.500"
             fontWeight="bold"
             fontSize="24px"
-            onChange={(e) => setInputNumber(e.target.value)}
+            onChange={(e) => {
+              setInputNumber(e.target.value);
+            }}
+            onFocus={() => {
+              isInputNumberFocusRef.current = true;
+            }}
+            onBlur={() => {
+              isInputNumberFocusRef.current = false;
+            }}
             textAlign="center"
             isReadOnly={!isSipClientIdle(callStatus)}
           />