algolia / algolia/autocomplete
Vue 3 Custom renderer state only changes on blur
- Dominant language
- TypeScript
- Stars
- 5.3k
- Forks
- 341
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 5
Description
## Description
When creating a custom renderer using Vue 3, the state only updates on the input `change` event and not during input.
So the state gets only updated when the user moves focus from the input and then moves focus back to the input.
## Reproduction
[**Codesandbox →**](https://codesandbox.io/s/cool-borg-0f4mj?file=/src/components/Autocomplete.vue)
**Steps**
1. Focus the input
2. Enter `foo`
3. Tab out of the input
5. Re-focus the input
4. See the panel open with the suggestion `foo`
## Expected behaviour
1. Focus the input
2. Enter `foo`
3. See the panel open with the suggestion `foo` without moving focus out of the input
## Environment
- OS: macOS Big SUr
- Browser: Chrome 97.0.4692.71
- Autocomplete version: 1.5.1
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction, especially src/components/Autocomplete.vue, and trace how the custom renderer handles input versus change events. Confirm the panel updates as each character is entered without blurring or refocusing the input.
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
- 42/100