algolia / algolia/autocomplete
Inconsistent behavior on `Escape` and `Enter` in debug mode
- 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
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