"Form Submission Failed" on /query on Chrome when adding filters

[Adam Johnson <me@…>]

Hi,

I got this error when trying to search for tickets on the Django Trac at ​https://code.djangoproject.com/query just now using the latest version of Chrome, 73. It also happens on Trac Trac ( https://trac.edgewall.org/query ).

After adding a filter, the form refuses to submit. Checking in the dev console I see the error message:

"Form submission failed, as the <SELECT> element named '0_description_mode' was implicitly closed by reaching the end of the file. Please add an explicit end tag ('</SELECT>')."

I checked and this does not happen in Firefox, my guess it's some new behaviour in Chrome.

I hacked around in the Chrome dev tools and found that modifying query.js to create the element with an extra '</select>' in its HTML, this stops occurring.

[Adam Johnson <me@…>]

Patch

[Adam Johnson <me@…>]

Screenshot of error

[anonymous]

​Here it's suggested to:

Go to chrome://flags/#enable-experimental-web-platform-features and click Disable.

And links to ​WhatWG.

[Adam Johnson <me@…>]

Thanks, that fixed it for me. Did not even cross my mind that it could be an experimental feature, which I turned on a few weeks ago.

[Jun Omae]

Reproduced but the select element has </select>.

$('select[name=0_description_mode]').parent().parent().html()
"<td><div class="inlinebuttons"><input type="button" value="–"></div></td><th scope="row"><label id="label_0_description">Description</label></th><td class="mode"><select name="0_description_mode"><option value="~">contains</option><option value="!~">doesn't contain</option></select></td><td class="filter"><input type="text" name="0_description" size="42"></td>"

I believe that is a Chrome / Chromium issue. Please report Chrome or Chromium bug tracker. The experimental feature should be disabled.

[Adam Johnson <me@…>]

Reported at ​https://bugs.chromium.org/p/chromium/issues/detail?id=947878

[Weston Ruter]

I just encountered this issue on the WordPress Trac instance. I opened a ​ticket there as well.

I was able to fix the problem locally via ​Local Overrides in Chrome DevTools. I modified ​https://s.w.org/style/trac/common/js/query.js?v=216 by simply supplying the missing </select>:

44c44
<     var e = $($.htmlFormat('<select name="$1">', name));
---
>     var e = $($.htmlFormat('<select name="$1"></select>', name));

[Athari]

I'm encountering this problem right now in Edge. enable-experimental-web-platform-features is enabled, but I have no plans to change browser settings for one specific website's bugs.

The workaround I'm using right now: before submitting the search form, run this code in the dev console:

document.querySelectorAll('select').forEach(e => e.outerHTML = e.outerHTML)

Chrome team closed their issue <link-removed> as "won't fix", so you might want to fix it on your side. The code is provided above by Weston Ruter. Basically, just add the closing tag.

P.S. Wat:

URL's blacklisted by dbl.spamhaus.org (issues.chromium.org[255.255.254])

Anyway, the link is provided above by Adam Johnson.

[Jun Omae]

Hm, according to ​https://jquery.com/upgrade-guide/3.5/, it seems that we should explicitly close a tag with attributes when passed to jQuery. I just created a patch: attachment:jquery-explicitly-closing-tags.diff​.