Auto Suggest Fix: allows focus to return to input after hitting esc

src/Form/FormAutosuggest.jsx

@@ -1,5 +1,5 @@
 import React, {
-  useEffect, useState,
+  useEffect, useState, useRef,
 } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -27,6 +27,7 @@ function FormAutosuggest({
   ...props
 }) {
   const intl = useIntl();
+  const formControlRef = useRef();
   const parentRef = useArrowKeyNavigation({
     selectors: arrowKeyNavigationSelector,
     ignoredKeys: ignoredArrowKeysNames,
@@ -132,6 +133,10 @@ function FormAutosuggest({
     if (e.key === 'Escape' && isActive) {
       e.preventDefault();
 
+      if (formControlRef) {
+        formControlRef.current.focus();
+      }
+
       setState(prevState => ({
         ...prevState,
         dropDownItems: [],
@@ -221,6 +226,7 @@ function FormAutosuggest({
     <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
       <FormGroup isInvalid={!!state.errorMessage}>
         <FormControl
+          ref={formControlRef}
           aria-expanded={(state.dropDownItems.length > 0).toString()}
           aria-owns="pgn__form-autosuggest__dropdown-box"
           role="combobox"

src/Form/tests/FormAutosuggest.test.jsx

@@ -187,4 +187,15 @@ describe('controlled behavior', () => {
     const updatedList = queryAllByTestId('autosuggest_optionitem');
     expect(updatedList.length).toBe(0);
   });
+
+  it('check focus on input after esc', () => {
+    const { getByTestId } = render(<FormAutosuggestTestComponent />);
+    const input = getByTestId('autosuggest_textbox_input');
+    const dropdownBtn = getByTestId('autosuggest_iconbutton');
+    userEvent.click(dropdownBtn);
+
+    userEvent.keyboard('{esc}');
+
+    expect(input.matches(':focus')).toBe(true);
+  });
 });