Skip to content

fix data flicker when quickly changing between inputs#2558

Merged
sdirix merged 1 commit intoeclipsesource:masterfrom
Alxndrsk:master
Apr 6, 2026
Merged

fix data flicker when quickly changing between inputs#2558
sdirix merged 1 commit intoeclipsesource:masterfrom
Alxndrsk:master

Conversation

@Alxndrsk
Copy link
Copy Markdown
Contributor

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
Copy Markdown

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
@coveralls
Copy link
Copy Markdown

Coverage Status

coverage: 82.852%. remained the same — Alxndrsk:master into eclipsesource:master

Copy link
Copy Markdown
Member

@sdirix sdirix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me! Thanks!

@sdirix sdirix merged commit 7599417 into eclipsesource:master Apr 6, 2026
8 checks passed
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.

3 participants