formio.js icon indicating copy to clipboard operation
formio.js copied to clipboard
verified publisher icon formio

Clearing hidden fields within the panel

Open rvelis opened this issue 6 months ago • 2 comments

Describe the bug Hello, we're opening this issue related to https://github.com/formio/formio.js/issues/6122 so our problem can be understood. The solution provided in this issue isn't a valid solution for us, as it causes the components we've developed with form.io for a year to stop working. Until version 5.0.2, when hiding a panel, it was possible for the fields included in the panel to have their contents cleared by checking the "Clear value when hidden" checkbox. This checkbox disappears in later versions and is replaced by the "Omit value from submission data when conditionally hidden" checkbox, which works differently.

Version/Branch formio/js 5.0.2, formio/js 5.1.2 and formio/js 5.3.0-rc.2

To Reproduce Below, we detail the behavior observed in both different versions and the exact steps to reproduce it:

  1. Add a Text component to the form (Text_A).
  2. Add a Panel component to the form.
  3. Inside the Panel, add a Text component (Text_B).
  4. Set a condition on the Panel and Text_B to display it only when the value of Text_A equals "2".
  5. Enable the "Clear value when hidden" option (clearOnHide: true) in the Text_B component (inside the Panel).
  6. Save and preview the form.

Test on formio/js version 5.0.2 (Our components work correctly)

  • Enter the value "2" in Text_A → The Panel is displayed.
  • Enter any value in Text_B.
  • Change the value of Text_A to "3" → The Panel is hidden.
  • Re-enter "2" in Text_A → The Panel displays again.
  • Result: Text_B appears empty (the value has been successfully cleared).

Test on formio/js versions 5.1.2 and 5.3.0-rc.2 (Our components stop working)

  • Enter the value "2" in Text_A → The Panel displays.
  • Enter any value in Text_B.
  • Change the value of Text_A to "3" → The Panel hides.
  • Re-enter "2" in Text_B → The Panel displays again.
  • Result: Text_B retains the previously entered value (it is not cleared, even though it has clearOnHide: true).

Expected behavior

  • The Panel doesn't have the clearOnHide: true option. This option is only available in the Text_B component within the Panel.
  • The expected behavior is for Text_B to be cleared when the Panel is hidden, since it has the clearOnHide option enabled.

Screenshots Formio/js 5.0.2 test video Formio/js 5.1.2 test video Formio/js 5.3.0-rc.2 test video Video test with formio/js 5.3.0-rc.2 rules

Additional context As we've invested a lot of time in the components we've already developed, adapting our components to this new behavior isn't easy because we have been developing fairly complex components with many fields within panels.

We understand the addition of new features and some behaviour changes, but to ensure proper compatibility with previous developments, the previous behaviour in 5.0.2 should be maintained d (I don't know if both checkboxes could be left working, allowing the user to select whichever one is desired).

rvelis avatar Jun 17 '25 11:06 rvelis

We have continued investigating this issue and have identified a key difference in the behavior between the Panel and Well components regarding the clearOnHide property.

Specifically, we have observed that in the Panel component, the clearOnHide property is set to false by default in the JSON configuration. When testing with formio/js version 5.2.0, this causes the fields inside the Panel not to be cleared when the Panel is hidden, even if the inner fields have clearOnHide: true. However, if we manually edit the JSON and set clearOnHide: true on the Panel, the clearing behavior works as expected and the fields are properly cleared when the Panel is hidden.

We discovered this by comparing it to the Well component, where clearOnHide is set to true by default, and in this case, the clearing functionality works correctly out of the box.

This suggests that the root of the problem is the default value of clearOnHide in the Panel component. If it is set to false, the fields are not cleared, but if set to true, the expected behavior is restored.

We hope this additional information helps clarify the issue and assists in finding a solution that maintains compatibility with previous versions and expected behaviors.

rvelis avatar Jul 09 '25 11:07 rvelis

Hi, @rvelis ! Thank you for reporting this. We have logged a ticket for the backlog. We are always willing to review any contributions to resolve this issue from the open source community.

For internal reference: FIO-10248

Victoriya25 avatar Nov 20 '25 11:11 Victoriya25