wb-fieldflow dropdown list removes destination page URL query parameters

[MatthieuBonenfant-GOC]

Required information

Describe the bug

As the title says, the wb-fieldflow list dropdown removes the URL query parameters from URLs appearing in the list.

In our case, because the language query parameter ?lang=fra is stripped out, our web server will enforce the English query parameter ?lang=eng so it is impossible to link to the French version of a page from the dropdown list. This explains why you end up on an English page using the example below.

Live example https://international.canada.ca/fr/analytics/test-pulldown-clicks

<h2>UNSORTED LIST WITH CLASS wb-fieldflow</h2>
<div data-gc-analytics-collect="[ {&quot;value&quot;:&quot;select&quot;,&quot;emptyField&quot;: &quot;N/A&quot;}]" data-gc-analytics-formname="GAC-Test|Drop-Down:Test 2">
<div class="wb-fieldflow" data-wb-fieldflow="{&quot;inline&quot;: true}">
<p>Find the plugin for the action you need:</p>
<ul>
<li><a href="https://www.canada.ca/fr/services/emplois.html">Test Passed - Link WITHOUT query parameters in the URL</a></li>
<li><a href="https://www.international.gc.ca/transparency-transparence/strategic-environmental-assessment-evaluations-environnementales-strategiques/2022-indo-pacific-pacifique.aspx?lang=fra">Test Failed - Link WITH query parameters in the URL</a></li>
</ul>
</div>
</div>

To Reproduce

Add a URL with a query parameter like a UTM campaign code or a language parameter ?lang=fra in our case

Expected behaviour

Maintains query parameters of URLs

Who shall do the work? I am asking for Principal publisher to please do the work

Additional information (optional)

Version of WET-BOEW/GCWeb you are using

frameworks v4.0.78 theme-gcweb-v14.9.0

Desktop/Smartphone (please complete the following information)

• Tested on desktop, in Edge and Chrome, failed in both cases.

Thanks!

[MatthieuBonenfant-GOC]

We patched it using data-wb-fieldflow parameters on the LI element. You may close the ticket if this is how we should be using it.

<li data-wb-fieldflow="{&quot;action&quot;: &quot;query&quot;, &quot;name&quot;:&quot;lang&quot;, &quot;value&quot;:&quot;fra&quot;}"><a href="https://www.international.gc.ca/transparency-transparence/strategic-environmental-assessment-evaluations-environnementales-strategiques/2022-indo-pacific-pacifique.aspx?lang=fra">Link WITH query parameters in the URL</a></li>

[EricDunsworth]

IMO it's probably a bug.

I just tried messing around with it locally and it looks like only hardcoded lang parameters get stripped-out upon submission :S.

I tried using different parameter names and even combinations of parameters (such as ?Atest=test&somethingelse=something&lang=fr&testing=yep) and everything was always retained except for lang. Renaming lang to lango even brought that parameter back to life...

[EricDunsworth]

Just transferred this over to GCWeb since the field flow plugin belongs to it.

As for the issue itself... It looks like what's happening has to do with how field flow transforms URL params into hidden inputs before submitting.

Field flow passes raw HTML to jQuery to generate its inputs, but there's a twist. WET's jQuery 2.x implementation hooks-into DOMPurify. So what's happening is that DOMPurify is "sanitizing" the raw HTML before reaching jQuery. That's causing name="[any HTML attribute name]" attributes to be filtered-out due to cure53/DOMPurify#980.

So your ?lang=fra" URL param is getting transformed into this:

<input type="hidden" value="fra">

Instead of this:

<input type="hidden" name="lang" value="fra">

Anyway, I'll try sending a PR to fix this later today or next week. I'll try generating those inputs via "pure" JavaScript instead of jQuery (to take DOMPurify out of the picture).