algolia / algolia/autocomplete

Vue 3 Custom renderer state only changes on blur

Open
#870 6 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.