umbraco / Umbraco.Forms.Issues

Public issue tracker for Umbraco Forms
29 stars 0 forks source link

Show/hide group condition not working #1156

Closed Ramya-Devendiran closed 7 months ago

Ramya-Devendiran commented 8 months ago

Version 12.2.2 Umrbaco version 12.3.6

We added 2 page form to Form picker in a blocklist or embedded as macro in RTE in a blocklist. Page 1 has a Radio button list field and Page 2 has two groups. Condition is set to show the group 1 when radio value is Test1 and to show group 2 when radio value is test2.

The page 2 is rendered but the fieldset is hidden.

Tried with and without "async" parameter @Html.RenderUmbracoFormDependencies(Url, new { @async = "async" }) and set options DisableClientSideValidationDependencyCheck to true when testing with "async".

"Forms": {
  "FormDesign": {
    "FormElementHtmlIdPrefix": "N_"
  },
  "Options": {
    "DisableClientSideValidationDependencyCheck": true,
    "DisableRelationTracking": true
  }
}

Steps to reproduce.

Create a form with 2 pages. Page 1: Custome: Radio button list - values private, company.

Page2: Group1: set condition to show group when radio Quantity is "private". Name: short answer field.

Group2: set condition to show group when radio Quantity is "company". Organisation name: short answer field.

Add the form to a formpicker in a block list element.

Select "private" in the form.

Expected result: Show Name.

Actual result: it is showing only the PAGE2 title and the fields are hidden. image

AndyButland commented 8 months ago

Could you confirm if you are using a custom theme here please, or the default one? Thanks.

Ramya-Devendiran commented 8 months ago

Yes, I am using default theme. And I have edited the form.cshtml and render.cshtml for css changes.

ronaldbarendse commented 8 months ago

Thanks for also including the Forms settings, as the issue might be caused by setting a custom FormElementHtmlIdPrefix. Can you test again without this setting applied, so we can single out whether this is the cause?

If removing this setting fixes the problem, make sure you're using the latest JS assets (/App_Plugins/UmbracoForms/Assets/themes/default/umbracoforms.min.js - which is provided by the Umbraco.Forms.StaticAssets Razor Class Library), because I couldn't replicate the issue when conditions are set on both the page, group or fields themselves...

Ramya-Devendiran commented 7 months ago

I have removed FormElementHtmlIdPrefix settings and restested. The issue persist. The conditions are not working. I added FormElementHtmlIdPrefix in first place as fix to the issue.

AndyButland commented 7 months ago

OK - you said above that you are using default theme, but have also made some edits to specific files. With Forms 12 the default theme is shipped as a compiled razor class library, so you can't edit the files directly, so it sounds that maybe you have made a custom theme but have just amended one or two files.

If I've understood that right, would it be possible to share the .cshtml files you have edited please, so I can run with them locally to see if we can replicate the problem? Thanks.

Ramya-Devendiran commented 7 months ago

render.txt form.txt Attached Form.cshtml and Render.cshtml

AndyButland commented 7 months ago

I think you are missing a couple of updates that you should apply from the default theme.

In Form.cshtml, where you have:

<fieldset class="umbraco-forms-fieldset" id="@fs.Id" @{
  if (hideFieldSetWhenRendering) {
    <text> style="display: none" </text>
  }
 }>

And:

<div class="form-group @(f.Mandatory ? "required" :"") @Html.GetFormFieldWrapperClass(f.FieldTypeName) @f.CssClass" @{
  if (hideFieldWhenRendering) {
    <text> style="display: none" </text>
  }
 } >

Replace with:

<fieldset class="umbraco-forms-fieldset@{ if (hideFieldWhenRendering) { <text> umbraco-forms-hidden </text>  } }" id="@fs.Id">

And:

<div class="form-group @(f.Mandatory ? "required" :"") @Html.GetFormFieldWrapperClass(f.FieldTypeName) @f.CssClass  @{ if (hideFieldWhenRendering) { <text> umbraco-forms-hidden</text>  } }">

I think that should sort it out.

For background these changes were made in relation to the issue raised in https://github.com/umbraco/Umbraco.Forms.Issues/issues/1110

Ramya-Devendiran commented 7 months ago

It didnt work even after replacing inline style with a class.

I changed the hide flag set condition to checked for actionType "HIDE" instead of "SHOW" which was in the default form template. bool hideFieldSetWhenRendering = fs.HasCondition && fs.ConditionActionType == FieldConditionActionType.Hide;

Now it is working.

AndyButland commented 7 months ago

OK, glad you've sorted it.

I think...

bool hideFieldSetWhenRendering = fs.HasCondition && fs.ConditionActionType == FieldConditionActionType.Show;

... should be correct though. The idea here is that the field will only be shown when a condition is true, so by default it should be hidden when rendering.

But if it's working for your conditions setup then all good.