fix(core): open closed panel on ArrowDown and ArrowUp

packages/autocomplete-core/src/__tests__/getInputProps.test.ts

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 
 import {
@@ -785,6 +786,134 @@ describe('getInputProps', () => {
  userEvent.type(inputElement, '{arrowup}');
  expect(onActive).toHaveBeenCalledTimes(1);
  });
+
+ test('ArrowDown opens the panel when closed with openOnFocus', () => {
+ const onStateChange = jest.fn();
+ const { inputElement } = createPlayground(createAutocomplete, {
+ onStateChange,
+ openOnFocus: true,
+ initialState: {
+ collections: [
+ createCollection({
+ items: [{ label: '1' }, { label: '2' }],
+ }),
+ ],
+ },
+ });
+
+ inputElement.focus();
+ userEvent.type(inputElement, '{esc}{arrowdown}');
+
+ waitFor(() => {
+ expect(onStateChange).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ prevState: expect.objectContaining({
+ isOpen: false,
+ }),
+ state: expect.objectContaining({
+ isOpen: true,
+ activeItemId: null,
+ }),
+ })
+ );
+ });
+ });
+
+ test('ArrowDown opens the panel when closed with a query', () => {
+ const onStateChange = jest.fn();
+ const { inputElement } = createPlayground(createAutocomplete, {
+ onStateChange,
+ initialState: {
+ query: 'a',
+ collections: [
+ createCollection({
+ items: [{ label: '1' }, { label: '2' }],
+ }),
+ ],
+ },
+ });
+
+ inputElement.focus();
+ userEvent.type(inputElement, '{esc}{arrowdown}');
+
+ waitFor(() => {
+ expect(onStateChange).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ prevState: expect.objectContaining({
+ isOpen: false,
+ }),
+ state: expect.objectContaining({
+ isOpen: true,
+ activeItemId: null,
+ }),
+ })
+ );
+ });
+ });
+
+ test('ArrowUp opens the panel when closed with openOnFocus', () => {
+ const onStateChange = jest.fn();
+ const { inputElement } = createPlayground(createAutocomplete, {
+ onStateChange,
+ openOnFocus: true,
+ initialState: {
+ collections: [
+ createCollection({
+ items: [{ label: '1' }, { label: '2' }],
+ }),
+ ],
+ },
+ });
+
+ inputElement.focus();
+ userEvent.type(inputElement, '{esc}{arrowup}');
+
+ waitFor(() => {
+ expect(onStateChange).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ prevState: expect.objectContaining({
+ isOpen: false,
+ }),
+ state: expect.objectContaining({
+ isOpen: true,
+ activeItemId: 1,
+ }),
+ })
+ );
+ });
+ });
+
+ test('ArrowUp opens the panel when closed with a query', () => {
+ const onStateChange = jest.fn();
+ const { inputElement } = createPlayground(createAutocomplete, {
+ onStateChange,
+ initialState: {
+ query: 'a',
+ collections: [
+ createCollection({
+ items: [{ label: '1' }, { label: '2' }],
+ }),
+ ],
+ },
+ });
+
+ inputElement.focus();
+ userEvent.type(inputElement, '{esc}{arrowup}');
+
+ waitFor(() => {
+ expect(onStateChange).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ prevState: expect.objectContaining({
+ isOpen: false,
+ }),
+ state: expect.objectContaining({
+ isOpen: true,
+ activeItemId: 1,
+ }),
+ })
+ );
+ });
+ });
  });
 
  describe('Escape', () => {
@@ -860,6 +989,7 @@ describe('getInputProps', () => {
  state: expect.objectContaining({
  query: '',
  status: 'idle',
+ activeItemId: null,
  collections: [],
  }),
  })

packages/autocomplete-core/src/onKeyDown.ts

@@ -1,5 +1,6 @@
 import { onInput } from './onInput';
 import {
+ ActionType,
  AutocompleteScopeApi,
  AutocompleteStore,
  BaseItem,
@@ -22,39 +23,72 @@ export function onKeyDown<TItem extends BaseItem>({
  ...setters
 }: OnKeyDownOptions<TItem>): void {
  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
- // Default browser behavior changes the caret placement on ArrowUp and
- // Arrow down.
- event.preventDefault();
+ // eslint-disable-next-line no-inner-declarations
+ function triggerScrollIntoView() {
+ const nodeItem = props.environment.document.getElementById(
+ `${props.id}-item-${store.getState().activeItemId}`
+ );
 
- store.dispatch(event.key, null);
+ if (nodeItem) {
+ if ((nodeItem as any).scrollIntoViewIfNeeded) {
+ (nodeItem as any).scrollIntoViewIfNeeded(false);
+ } else {
+ nodeItem.scrollIntoView(false);
+ }
+ }
+ }
 
- const nodeItem = props.environment.document.getElementById(
-  `${props.id}-item-${store.getState().activeItemId}`
- );
+ // eslint-disable-next-line no-inner-declarations
+ function triggerOnActive() {
+  const highlightedItem = getActiveItem(store.getState());
 
- if (nodeItem) {
- if ((nodeItem as any).scrollIntoViewIfNeeded) {
- (nodeItem as any).scrollIntoViewIfNeeded(false);
- } else {
- nodeItem.scrollIntoView(false);
+ if (store.getState().activeItemId !== null && highlightedItem) {
+ const { item, itemInputValue, itemUrl, source } = highlightedItem;
+
+ source.onActive({
+ event,
+ item,
+ itemInputValue,
+ itemUrl,
+ refresh,
+ source,
+ state: store.getState(),
+ ...setters,
+ });
  }
  }
 
- const highlightedItem = getActiveItem(store.getState());
-
- if (store.getState().activeItemId !== null && highlightedItem) {
- const { item, itemInputValue, itemUrl, source } = highlightedItem;
+ // Default browser behavior changes the caret placement on ArrowUp and
+ // Arrow down.
+ event.preventDefault();
 
- source.onActive({
+ // When re-opening the panel, we need to split the logic to keep the actions
+ // synchronized as `onInput` returns a promise.
+ if (
+ store.getState().isOpen === false &&
+ (props.openOnFocus || Boolean(store.getState().query))
+ ) {
+ onInput({
  event,
- item,
- itemInputValue,
- itemUrl,
+ props,
+ query: store.getState().query,
  refresh,
- source,
- state: store.getState(),
+ store,
  ...setters,
+ }).then(() => {
+ store.dispatch(event.key as ActionType, {
+ nextActiveItemId: props.defaultActiveItemId,
+ });
+
+ // We need to wait for the panel to open.
+ setTimeout(triggerScrollIntoView, 0);
+ triggerOnActive();
  });
+ } else {
+ store.dispatch(event.key, {});
+
+ triggerScrollIntoView();
+ triggerOnActive();
  }
  } else if (event.key === 'Escape') {
  // This prevents the default browser behavior on `input[type="search"]`

packages/autocomplete-core/src/stateReducer.ts

@@ -55,12 +55,14 @@ export const stateReducer: Reducer = (state, action) => {
  case 'ArrowDown': {
  const nextState = {
  ...state,
- activeItemId: getNextActiveItemId(
- 1,
- state.activeItemId,
- getItemsCount(state),
- action.props.defaultActiveItemId
- ),
+ activeItemId: action.payload.hasOwnProperty('nextActiveItemId')
+ ? action.payload.nextActiveItemId
+ : getNextActiveItemId(
+ 1,
+ state.activeItemId,
+ getItemsCount(state),
+ action.props.defaultActiveItemId
+ ),
  };
 
  return {
@@ -90,13 +92,15 @@ export const stateReducer: Reducer = (state, action) => {
  if (state.isOpen) {
  return {
  ...state,
+ activeItemId: null,
  isOpen: false,
  completion: null,
  };
  }
 
  return {
  ...state,
+ activeItemId: null,
  query: '',
  status: 'idle',
  collections: [],

packages/autocomplete-core/src/types/AutocompleteStore.ts

@@ -18,7 +18,7 @@ type Action<TItem extends BaseItem, TPayload> = {
  payload: TPayload;
 };
 
-type ActionType =
+export type ActionType =
  | 'setActiveItemId'
  | 'setQuery'
  | 'setCollections'