From 7509481bb9339e038027efa6564df9746b73518a Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Wed, 28 Apr 2021 02:46:43 +0530
Subject: [PATCH] Added the LTR support for the dialpad

---
 res/css/views/voip/_DialPadContextMenu.scss        | 14 ++++++++++++--
 .../views/context_menus/DialpadContextMenu.tsx     | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 9879b7da1c..c01ce0f2d9 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,8 +30,18 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 155px;
-    overflow: auto;
+    max-width: 150px;
+    border: none;
+    margin: 0px;
+  
+}
+.mx_DialPadContextMenu_dialled input{
+    font-size: 18px;
+    font-weight: 600;
+    overflow: hidden;
+    text-align: left;
+    direction: rtl;
+    background-color: rgb(0, 0, 0, 0);
 }
 
 .mx_DialPadContextMenu_dialPad {
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 17abce0c61..0a1d8184f2 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -18,6 +18,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import Field from "../elements/Field";
 import Dialpad from '../voip/DialPad';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -44,13 +45,23 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({value: this.state.value + digit});
     }
 
+    onChange = (ev) => {
+        this.setState({value: ev.target.value});
+    }
+    
+
     render() {
         return <ContextMenu {...this.props}>
             <div className="mx_DialPadContextMenu_header">
                 <div>
                     <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
                 </div>
-                <div className="mx_DialPadContextMenu_dialled">{this.state.value}</div>
+                <form >
+                    <Field className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        onChange={this.onChange}
+                    />
+                </form>
             </div>
             <div className="mx_DialPadContextMenu_horizSep" />
             <div className="mx_DialPadContextMenu_dialPad">