From f2f6dbccb9c9b265d96450d47c6f30270312820a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Mon, 22 Aug 2022 23:28:56 +0500
Subject: [PATCH] GH-173 - Assign modal fix

---
 webapp/src/components/assignee_modal/assignee_modal.jsx      | 1 +
 webapp/src/components/todo_issues/todo_issues.jsx            | 2 +-
 .../src/components/user_selector/autocomplete_selector.tsx   | 2 ++
 webapp/src/widget/buttons/button.scss                        | 2 +-
 webapp/src/widget/menu.scss                                  | 2 +-
 webapp/src/widget/menuItem.tsx                               | 5 +++--
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/assignee_modal/assignee_modal.jsx b/webapp/src/components/assignee_modal/assignee_modal.jsx
index cd9e039a..943e08fb 100644
--- a/webapp/src/components/assignee_modal/assignee_modal.jsx
+++ b/webapp/src/components/assignee_modal/assignee_modal.jsx
@@ -76,6 +76,7 @@ const AssigneeModal = (
                     icon={<CompassIcon icon='close'/>}
                 />
                 <AutocompleteSelector
+                    autoFocus={true}
                     id='send_to_user'
                     loadOptions={autocompleteUsers}
                     onSelected={changeAssigneeDropdown}
diff --git a/webapp/src/components/todo_issues/todo_issues.jsx b/webapp/src/components/todo_issues/todo_issues.jsx
index c420333d..766d9d56 100644
--- a/webapp/src/components/todo_issues/todo_issues.jsx
+++ b/webapp/src/components/todo_issues/todo_issues.jsx
@@ -21,7 +21,7 @@ function ToDoIssues(props) {
             <Tada/>
             <h3 style={style.completed.title}>{'All tasks completed'}</h3>
             <p style={style.completed.subtitle}>
-                {'Nicely done, you’ve finished all of your tasks! Why not reward yourself with a little break?'}
+                {'Nicely done, you\'ve finished all of your tasks! Why not reward yourself with a little break?'}
             </p>
         </div>
     );
diff --git a/webapp/src/components/user_selector/autocomplete_selector.tsx b/webapp/src/components/user_selector/autocomplete_selector.tsx
index 51df6b96..e771df45 100644
--- a/webapp/src/components/user_selector/autocomplete_selector.tsx
+++ b/webapp/src/components/user_selector/autocomplete_selector.tsx
@@ -19,6 +19,7 @@ import './autocomplete_selector.scss';
 
 type Props = {
     loadOptions: (inputValue: string, callback: ((options: OptionsType<UserProfile>) => void)) => Promise<unknown> | void,
+    autoFocus?: boolean,
     label?: string,
     labelClassName?: string,
     helpText?: string,
@@ -123,6 +124,7 @@ export default function AutocompleteSelector(props: Props) {
             {labelContent}
             <div className={inputClassName}>
                 <AsyncSelect
+                    autoFocus={props.autoFocus || false}
                     cacheOptions={true}
                     loadOptions={loadOptions}
                     defaultOptions={true}
diff --git a/webapp/src/widget/buttons/button.scss b/webapp/src/widget/buttons/button.scss
index b438f5cb..b8722587 100644
--- a/webapp/src/widget/buttons/button.scss
+++ b/webapp/src/widget/buttons/button.scss
@@ -6,7 +6,7 @@
     align-items: center;
     text-align: center;
     justify-content: center;
-    border-radius: var(--default-rad);
+    border-radius: 4px;
     min-width: 20px;
     cursor: pointer;
     overflow: hidden;
diff --git a/webapp/src/widget/menu.scss b/webapp/src/widget/menu.scss
index c1fb66a2..88e213fd 100644
--- a/webapp/src/widget/menu.scss
+++ b/webapp/src/widget/menu.scss
@@ -11,7 +11,7 @@
     z-index: 15;
     background-color: rgba(var(--center-channel-bg-rgb), 1);
     color: rgba(var(--center-channel-color-rgb), 1);
-    border-radius: var(--default-rad);
+    border-radius: 4px;
     box-shadow: var(--elevation-4);
 
     .menu-contents {
diff --git a/webapp/src/widget/menuItem.tsx b/webapp/src/widget/menuItem.tsx
index dd2fc4ae..08418762 100644
--- a/webapp/src/widget/menuItem.tsx
+++ b/webapp/src/widget/menuItem.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 
 import CompassIcon from '../components/icons/compassIcons';
@@ -20,8 +20,9 @@ const MenuItem = (props: Props) => {
     const {icon, shortcut, action, text} = props;
 
     useEffect(() => {
-        function handleKeypress(e: {key: string}) {
+        function handleKeypress(e: any) {
             if (e.key === shortcut) {
+                e.target.dispatchEvent(new Event('menuItemClicked'));
                 action();
             }
         }