Fix flickering inputs on Webkit browsers #559
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…browsers Some difference in the JS engine in WebKit (the browser engine behind Safari or any other browser on iOS/MacOS) vs. Gecko (Firefox) and Blink (Chromium, Edge) seems to cause a different (debounce) behaviour and or event firing/acting on events w/r to the Formio renderer. On Webkit, the formio initialized event triggered with mismatching backend data, causing the form field inputs to be cleared and the submission to be updated, which in turn triggers the logic check again due to a change event being fired. This then leads again to a change in the formio configuration and the formio renderer re-initializing, ad infinitum. Somewhere the form data and form configuration state goes out of sync and it's incredibly hard to manage this, especially due to the large number of related issues in the past. Since we use the formio initialized event pretty much only to form step data from earlier submissions or when navigating between steps, we avoid setting updated form data at all in formio initialized events triggered by logic evaluations. The logic evaluation itself already manages the form instance submission data, in case that the backend returns calculated/derived values, for example. I truly hope this doesn't break anything else, but due to the lack of tests (granted, it's near impossible to test this mess) and complexity of this part of the code base, I can't say I'm very confident in this fix.
sergei-maertens
added
the
needs-backport
Codecov ReportAll modified lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #559 +/- ##
==========================================
- Coverage 70.90% 70.55% -0.36%
==========================================
Files 207 207
Lines 4290 4296 +6
Branches 1163 1165 +2
==========================================
- Hits 3042 3031 -11
- Misses 1216 1233 +17
Partials 32 32
☔ View full report in Codecov by Sentry. |
SilviaAmAm
approved these changes
Sep 29, 2023
|
Needs backporting to 1.4.x and 1.5.x - 1.3.x is React 17 based, which doesn't seem to have this bug. The React 18 upgrade doing the batching of state updates is suspected to not play nice with the formio events. |
sergei-maertens
added a commit
that referenced
this pull request
Sep 29, 2023
…browsers Some difference in the JS engine in WebKit (the browser engine behind Safari or any other browser on iOS/MacOS) vs. Gecko (Firefox) and Blink (Chromium, Edge) seems to cause a different (debounce) behaviour and or event firing/acting on events w/r to the Formio renderer. On Webkit, the formio initialized event triggered with mismatching backend data, causing the form field inputs to be cleared and the submission to be updated, which in turn triggers the logic check again due to a change event being fired. This then leads again to a change in the formio configuration and the formio renderer re-initializing, ad infinitum. Somewhere the form data and form configuration state goes out of sync and it's incredibly hard to manage this, especially due to the large number of related issues in the past. Since we use the formio initialized event pretty much only to form step data from earlier submissions or when navigating between steps, we avoid setting updated form data at all in formio initialized events triggered by logic evaluations. The logic evaluation itself already manages the form instance submission data, in case that the backend returns calculated/derived values, for example. I truly hope this doesn't break anything else, but due to the lack of tests (granted, it's near impossible to test this mess) and complexity of this part of the code base, I can't say I'm very confident in this fix. Backport-of: #559
sergei-maertens
added a commit
that referenced
this pull request
Sep 29, 2023
…browsers Some difference in the JS engine in WebKit (the browser engine behind Safari or any other browser on iOS/MacOS) vs. Gecko (Firefox) and Blink (Chromium, Edge) seems to cause a different (debounce) behaviour and or event firing/acting on events w/r to the Formio renderer. On Webkit, the formio initialized event triggered with mismatching backend data, causing the form field inputs to be cleared and the submission to be updated, which in turn triggers the logic check again due to a change event being fired. This then leads again to a change in the formio configuration and the formio renderer re-initializing, ad infinitum. Somewhere the form data and form configuration state goes out of sync and it's incredibly hard to manage this, especially due to the large number of related issues in the past. Since we use the formio initialized event pretty much only to form step data from earlier submissions or when navigating between steps, we avoid setting updated form data at all in formio initialized events triggered by logic evaluations. The logic evaluation itself already manages the form instance submission data, in case that the backend returns calculated/derived values, for example. I truly hope this doesn't break anything else, but due to the lack of tests (granted, it's near impossible to test this mess) and complexity of this part of the code base, I can't say I'm very confident in this fix. Backport-of: #559
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes open-formulieren/open-forms#3511
Some difference in the JS engine in WebKit (the browser engine behind Safari or any other browser on iOS/MacOS) vs. Gecko (Firefox) and Blink (Chromium, Edge) seems to cause a different (debounce) behaviour and or event firing/acting on events w/r to the Formio renderer.
On Webkit, the formio initialized event triggered with mismatching backend data, causing the form field inputs to be cleared and the submission to be updated, which in turn triggers the logic check again due to a change event being fired. This then leads again to a change in the formio configuration and the formio renderer re-initializing, ad infinitum. Somewhere the form data and form configuration state goes out of sync and it's incredibly hard to manage this, especially due to the large number of related issues in the past.
Since we use the formio initialized event pretty much only to form step data from earlier submissions or when navigating between steps, we avoid setting updated form data at all in formio initialized events triggered by logic evaluations. The logic evaluation itself already manages the form instance submission data, in case that the backend returns calculated/derived values, for example.
I truly hope this doesn't break anything else, but due to the lack of tests (granted, it's near impossible to test this mess) and complexity of this part of the code base, I can't say I'm very confident in this fix.