Skip to content

Commit

Permalink
fix: allows focus to return to input after hitting esc
Browse files Browse the repository at this point in the history
  • Loading branch information
cintnguyen committed Aug 23, 2023
1 parent 94d97dc commit 78945df
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/Form/FormAutosuggest.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {
useEffect, useState,
useEffect, useState, useRef,
} from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
Expand Down Expand Up @@ -27,6 +27,7 @@ function FormAutosuggest({
...props
}) {
const intl = useIntl();
const formControlRef = useRef();
const parentRef = useArrowKeyNavigation({
selectors: arrowKeyNavigationSelector,
ignoredKeys: ignoredArrowKeysNames,
Expand Down Expand Up @@ -131,6 +132,10 @@ function FormAutosuggest({
if (e.key === 'Escape' && isActive) {
e.preventDefault();

if (formControlRef) {
formControlRef.current.focus();
}

setState(prevState => ({
...prevState,
dropDownItems: [],
Expand Down Expand Up @@ -220,6 +225,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"
value={state.displayValue}
Expand Down

0 comments on commit 78945df

Please sign in to comment.