Skip to content

fix data flicker when quickly changing between inputs#2558

Open
Alxndrsk wants to merge 1 commit intoeclipsesource:masterfrom
Alxndrsk:master
Open

fix data flicker when quickly changing between inputs#2558
Alxndrsk wants to merge 1 commit intoeclipsesource:masterfrom
Alxndrsk:master

Conversation

@Alxndrsk
Copy link

When using the @jsonforms/vue-vuetify renderers, typing quickly into an input field and immediately triggering a blur event (e.g., by pressing Tab to move to the next field) causes the input's visual value to temporarily revert to its previous state before finally settling on the newly typed value. This creates a noticeable "flicker" effect for fast typists.

To Reproduce:

  1. Render some standard String controls using the Vue-Vuetify renderers.
  2. Focus an input field and type an initial value (e.g., "1" but the longer the text the more visible get's the flicker). Wait for a second to stabilize the entered data.
  3. Select all the intered text and type then a new value (e.g., "2").
  4. Immediately press Tab to exit the field.
  5. Watch the input field: it will momentarily revert to showing "1" (or a longer text) before jumping back to "2".

Expected behavior: The input field should immediately and stably display the final typed value ("2") upon blur, without temporarily regressing to the previous state.

Technical Context & Proposed Solution: The issue is caused by the interaction between Vue/Vuetify's re-render cycle on blur and the 300ms debounce implemented in useVuetifyControl (inside src/util/composition.ts).
When the blur event triggers a re-render before the debounce has resolved, the local DOM temporarily syncs with the stale JSONForms state.
This can be easily fixed by flushing the changeEmitter inside the underlying handleBlur as done in the pull request

@netlify
Copy link

netlify bot commented Mar 15, 2026

Deploy Preview for jsonforms-examples ready!

Name Link
🔨 Latest commit 3ee8426
🔍 Latest deploy log https://app.netlify.com/projects/jsonforms-examples/deploys/69b7217941d3470008d53e4e
😎 Deploy Preview https://deploy-preview-2558--jsonforms-examples.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Alxndrsk Alxndrsk marked this pull request as ready for review March 15, 2026 21:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant