[IMPROVE] use enter key to call using DialPad (#26454)

apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx

@@ -4,6 +4,7 @@ import React, { ReactElement } from 'react';
 import { DialInput } from './DialInput';
 import Pad from './Pad';
 import { useDialPad } from './hooks/useDialPad';
+import { useEnterKey } from './hooks/useEnterKey';
 
 type DialPadModalProps = {
 	initialValue?: string;
@@ -22,17 +23,17 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP
 		handlePadButtonClick,
 		handlePadButtonLongPressed,
 		handleCallButtonClick,
-		handleSubmit,
-		onSubmit,
 	} = useDialPad({ initialValue, errorMessage });
 
+	useEnterKey(handleCallButtonClick, isButtonDisabled);
+
 	return (
 		<Modal maxWidth='400px'>
 			<Modal.Header>
 				<Modal.Title />
 				<Modal.Close onClick={handleClose} />
 			</Modal.Header>
-			<Modal.Content is='form' onSubmit={handleSubmit(onSubmit)} display='flex' justifyContent='center' flexDirection='column'>
+			<Modal.Content display='flex' justifyContent='center' flexDirection='column'>
 				<Field>
 					<DialInput
 						ref={inputRef}

apps/meteor/ee/client/voip/modal/DialPad/hooks/useDialPad.tsx

 import { useTranslation } from '@rocket.chat/ui-contexts';
 import { ChangeEvent, RefCallback, useCallback, useEffect, useState } from 'react';
-import { useForm, UseFormHandleSubmit } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 import { useDialModal } from '../../../../../../client/hooks/useDialModal';
 import { useOutboundDialer } from '../../../../hooks/useOutboundDialer';
@@ -16,10 +16,6 @@ type DialPadStateHandlers = {
 	handlePadButtonClick: (digit: PadDigit[0]) => void;
 	handlePadButtonLongPressed: (digit: PadDigit[1]) => void;
 	handleCallButtonClick: () => void;
-	handleSubmit: UseFormHandleSubmit<{
-		PhoneInput: string;
-	}>;
-	onSubmit: () => void;
 };
 
 type DialPadProps = {
@@ -38,7 +34,6 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 		setValue,
 		setError,
 		clearErrors,
-		handleSubmit,
 		watch,
 		formState: { errors },
 	} = useForm<{ PhoneInput: string }>({
@@ -87,10 +82,6 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 		closeDialModal();
 	}, [outboundClient, setError, t, value, closeDialModal]);
 
-	const onSubmit = useCallback(() => {
-		handleCallButtonClick();
-	}, [handleCallButtonClick]);
-
 	const handleOnChange = useCallback(
 		(e) => {
 			clearErrors();
@@ -121,7 +112,5 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 		handlePadButtonClick,
 		handlePadButtonLongPressed,
 		handleCallButtonClick,
-		handleSubmit,
-		onSubmit,
 	};
 };

apps/meteor/ee/client/voip/modal/DialPad/hooks/useEnterKey.tsx

+import { useEffect } from 'react';
+
+export const useEnterKey = (onEnter: () => void, disabled: boolean): void => {
+	useEffect(() => {
+		const sendOnEnter = (e: KeyboardEvent): void => {
+			if (e.key !== 'Enter' || disabled) {
+				return;
+			}
+
+			e.stopPropagation();
+			onEnter();
+		};
+
+		window.addEventListener('keydown', sendOnEnter);
+
+		return (): void => {
+			window.removeEventListener('keydown', sendOnEnter);
+		};
+	}, [disabled, onEnter]);
+};