Cursor should show at the end when clicking in dialpad textfield (#2576)

* move cursor to end

* Change files

* Duplicate change files for beta release

* move cursor to end

Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-d3be0530-f540-4d98-a572-ddfc67367bbb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move cursor to the end of input when clicking on dialpad text field",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d3be0530-f540-4d98-a572-ddfc67367bbb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move cursor to the end of input when clicking on dialpad text field",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/Dialpad/Dialpad.tsx

@@ -267,6 +267,15 @@ const DialpadContainer = (props: {
         onChange={(e: any) => {
           setText(e.target.value);
         }}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onClick={(e: any) => {
+          const input = e.target;
+          const end = input.value.length;
+
+          // Move focus to end of input field
+          input.setSelectionRange(end, end);
+          input.focus();
+        }}
         placeholder={props.strings.placeholderText}
         data-test-id="dialpad-input"
         onRenderSuffix={(): JSX.Element => (