diff --git a/src/window/phone/dial-pad.tsx b/src/window/phone/dial-pad.tsx index 4c7aae0..7ee746d 100644 --- a/src/window/phone/dial-pad.tsx +++ b/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} diff --git a/src/window/phone/index.tsx b/src/window/phone/index.tsx index 8bbac54..9d54026 100644 --- a/src/window/phone/index.tsx +++ b/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)} />