Fixed autocomplete losing focus after selecting result with mouse.

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [main] Bumps `botframework-config` to v4.4.0 to address issues encrypting and decrypting .bot files in PR [1521](https://github.com/microsoft/BotFramework-Emulator/pull/1521)
 - [luis] Added ability to scroll within editor section of LUIS inspector and made inspector scrollbars thinner in PR [#1516](https://github.com/Microsoft/BotFramework-Emulator/pull/1516)
 - [client] Fixed issue where the slider control was getting stuck when dragging next to a webview element in PR [1546](https://github.com/microsoft/BotFramework-Emulator/pull/1546)
+- [client] Fixed issue where selecting an autocomplete result with the mouse was losing focus in PR [1554](https://github.com/microsoft/BotFramework-Emulator/pull/1554)
 
 ## v4.4.0 - 2019 - 05 - 03
 ## Added

packages/sdk/ui-react/src/widget/autoComplete/autoComplete.spec.tsx

@@ -124,8 +124,11 @@ describe('<AutoComplete />', () => {
   });
 
   it('should select a result', () => {
-    instance.onSelectResult('frank')();
+    const mockPreventDefault = jest.fn(() => null);
+    const mockEvent = { preventDefault: mockPreventDefault };
+    instance.onSelectResult(mockEvent, 'frank');
 
+    expect(mockPreventDefault).toHaveBeenCalled();
     expect(wrapper.state().currentInput).toBe('frank');
     expect(mockOnChange).toHaveBeenCalledWith('frank');
   });

packages/sdk/ui-react/src/widget/autoComplete/autoComplete.tsx

@@ -32,7 +32,7 @@
 //
 
 import * as React from 'react';
-import { ChangeEvent, Component, KeyboardEvent, ReactNode } from 'react';
+import { ChangeEvent, Component, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 
 import * as styles from './autoComplete.scss';
 
@@ -116,7 +116,7 @@ export class AutoComplete extends Component<AutoCompleteProps, AutoCompleteState
           className={`${index === this.state.selectedIndex ? styles.selected : ''}`}
           id={this.getOptionId(index)}
           key={result}
-          onMouseDown={this.onSelectResult(result)}
+          onMouseDown={ev => this.onSelectResult(ev, result)}
           role="option"
           aria-selected={index === this.state.selectedIndex}
         >
@@ -182,11 +182,14 @@ export class AutoComplete extends Component<AutoCompleteProps, AutoCompleteState
     return `auto-complete-option-${this.state.id}-${index}`;
   }
 
-  private onSelectResult = (result: string) => () => {
+  private onSelectResult = (ev: MouseEvent<HTMLLIElement>, result: string) => {
+    // stop the mousedown from firing a focus event on the <li> because
+    // we are going to dismiss the results list and want focus to remain on the input
+    ev.preventDefault();
     if (this.props.onChange) {
       this.props.onChange(result);
     }
-    this.setState({ currentInput: result });
+    this.setState({ currentInput: result, showResults: false });
   };
 
   private onFocus = () => {