algolia / algolia/autocomplete

Inconsistent behavior on `Escape` and `Enter` in debug mode

Open
#865 0 comments 0 reactions 0 assignees View on GitHub
Type: Bug
Dominant language
TypeScript
Stars
5.3k
Forks
341
Avg merge
3d 1h
Merged PRs (30d)
5

Description

## Description

When `debug=true` and you close the panel while still having pending requests, the resulting behavior is different depending on how you closed the panel:

- If you closed the panel with `Escape`, the panel stays closed
- If you closed the panel with `Enter`, the panel reopens

This needs further investigations, but it's likely caused by different logic in the state reducer:

- [`Escape` action](https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/stateReducer.ts#L91-L108) doesn't acknowledge `debug`
- [`blur`action](https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/stateReducer.ts#L146-L156) (triggered by `Enter`) has a special branch for `debug`

This behavior was initially observed in [this followup](https://github.com/algolia/autocomplete/issues/806#issuecomment-1002215837).

## Reproduction

[**Preview →**](https://codesandbox.io/s/algolia-autocomplete-example-react-renderer-forked-hizn9)

**Steps**

1. Throttle your browser (e.g., slow 3G)
2. Type and quickly hit `Escape` (before network requests are settled), see how the panel remains closed
3. Type and quickly hit `Enter` (before network requests are settled), see how the panel reopens

## Expected behavior

In both cases, the panel should stay closed even with `debug` enabled because these are intentional closing behaviors.

This might be questionable, and we may need to further specify how we want `debug` to behave (e.g., can you ever close the panel?)

## Environment

- OS: macOs Big Sur 11.5.1
- Browser: Firefox 95.0.2
- Autocomplete version: 1.5.1

Contributor guide

Open the contributing guide

Research direction

Start in packages/autocomplete-core/src/stateReducer.ts, comparing the Escape action around lines 91–108 with the blur action around lines 146–156 when debug is enabled. Reproduce the timing difference using the linked CodeSandbox with throttled network requests, then make both intentional closing behaviors leave the panel closed and verify the expected behavior for pending requests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.