fix: Clear UserInput when selecting a user from the list (#11979)

Author: AndyLnd

src/script/components/UserInput.test.tsx

@@ -21,7 +21,7 @@ import TestPage from 'Util/test/TestPage';
 import UserInput, {UserInputProps} from 'Components/UserInput';
 import ko from 'knockout';
 import {User} from '../entity/User';
-import {KEY_CODE} from 'Util/KeyboardUtil';
+import {KEY} from 'Util/KeyboardUtil';
 
 class UserInputPage extends TestPage<UserInputProps> {
   constructor(props?: UserInputProps) {
@@ -30,7 +30,7 @@ class UserInputPage extends TestPage<UserInputProps> {
 
   getInput = () => this.get('[data-uie-name="enter-users"]');
   getSelectedUsers = () => this.get('[data-uie-name="item-selected"]');
-  pressBackSpace = () => this.keyCodeDown(this.getInput(), KEY_CODE.BACKSPACE);
+  pressBackSpace = () => this.keyDown(this.getInput(), KEY.BACKSPACE);
 }
 
 describe('UserInput', () => {

src/script/components/UserInput.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useLayoutEffect, useRef} from 'react';
+import React, {useEffect, useLayoutEffect, useRef} from 'react';
 import {registerReactComponent} from 'Util/ComponentUtil';
 import type {User} from '../entity/User';
 import {MAX_HANDLE_LENGTH} from '../user/UserHandleGenerator';
@@ -48,14 +48,12 @@ const UserInput: React.FC<UserInputProps> = ({
 
   useLayoutEffect(() => {
     inputElement.current.focus();
-    const handle = window.requestAnimationFrame(() => {
-      innerElement.current.scrollTop = inputElement.current.scrollHeight;
-    });
+    innerElement.current.scrollTop = inputElement.current.scrollHeight;
+  }, [selectedUsers.length]);
 
-    return () => {
-      window.cancelAnimationFrame(handle);
-    };
-  }, [selectedUsers]);
+  useEffect(() => {
+    setInput('');
+  }, [selectedUsers.length]);
 
   const placeHolderText = emptyInput && noSelectedUsers ? placeholder : '';
 
@@ -75,7 +73,7 @@ const UserInput: React.FC<UserInputProps> = ({
             maxLength={MAX_HANDLE_LENGTH}
             onChange={event => setInput(event.target.value)}
             onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (isRemovalAction(event.keyCode) && emptyInput) {
+              if (isRemovalAction(event.key) && emptyInput) {
                 setSelectedUsers(selectedUsers.slice(0, -1));
               } else if (isEnterKey(event.nativeEvent)) {
                 event.preventDefault();

src/script/util/KeyboardUtil.ts

@@ -19,11 +19,6 @@
 
 import {Runtime} from '@wireapp/commons';
 
-export const KEY_CODE = {
-  BACKSPACE: 8,
-  DELETE: 46,
-};
-
 export const KEY = {
   ARROW_DOWN: Runtime.isEdge() ? 'Down' : 'ArrowDown',
   ARROW_LEFT: Runtime.isEdge() ? 'Left' : 'ArrowLeft',
@@ -73,9 +68,7 @@ export const isMetaKey = (keyboardEvent: KeyboardEvent): boolean =>
 export const isPasteAction = (keyboardEvent: KeyboardEvent): boolean =>
   isMetaKey(keyboardEvent) && isKey(keyboardEvent, KEY.KEY_V);
 
-export const isRemovalAction = (keyCode: number): boolean => {
-  return [KEY_CODE.BACKSPACE, KEY_CODE.DELETE].includes(keyCode);
-};
+export const isRemovalAction = (key: string): boolean => [KEY.BACKSPACE, KEY.DELETE].includes(key);
 
 export const insertAtCaret = (areaId: string, text: string) => {
   // http://stackoverflow.com/a/1064139

src/script/util/test/TestPage.tsx

@@ -51,8 +51,8 @@ export default class TestPage<T> {
   changeFiles = (element: ReactWrapper, files: File[]) => this.do(() => element.simulate('change', {target: {files}}));
   submit = (element: ReactWrapper) => this.do(() => element.simulate('submit'));
   mouseEnter = (element: ReactWrapper) => this.do(() => element.simulate('mouseenter'));
-  keyCodeUp = (element: ReactWrapper, keyCode: number) => this.do(() => element.simulate('keyup', {keyCode}));
-  keyCodeDown = (element: ReactWrapper, keyCode: number) => this.do(() => element.simulate('keydown', {keyCode}));
+  keyUp = (element: ReactWrapper, key: string) => this.do(() => element.simulate('keyup', {key}));
+  keyDown = (element: ReactWrapper, key: string) => this.do(() => element.simulate('keydown', {key}));
 
   update = () => this.driver.update();
   setProps = (props: T) => this.do(() => this.driver.setProps(props));