Bug #7958
openWhen progressive bootstrap is enabled, setting a WContainerWidget's tag name to "form" causes it to be skipped in the DOM tree
0%
Description
By "skipped" I mean the element in question is not included in the DOM, but its children are, at its level. See the example below.
To reproduce:
- Clone Wt into a subfolder wt of the attached archive (checkout tag 4.5.0)
mkdir build && cd build
cmake .. && make
./bugdemo --docroot . --http-listen 127.0.0.1:8080 -c ../wt_config.xml
- Point a browser at localhost:8080
- Inspect the text element
Expected result:
<div class="div1">
<form class="div2">
<div class="div3">
<span>Bug demo</span>
</div>
</form>
</div>
Actual result:
<div class="div1">
<div class="div3">
<span>Bug demo</span>
</div>
</div>
If you do not use the attached wt_config.xml
(or otherwise disable progressive bootstrap) the DOM structure is as expected. If you change div2
's tag name to anything other than form
(e.g. nav
, a
, foo
) the DOM structure is as expected.
Files
Updated by Wim Dumon almost 4 years ago
Hi,
If I'm not mistaken, this would lead to a form-in-form in progressive bootstrap, which is invalid html.
You cannot create form tags when using progressive bootstrap. The outer form is used to capture events in progressive bootstrap mode in case that no JS would be available.
BR,
Wim.
Updated by Captain Crutches almost 4 years ago
What outer form? I'm not nesting any forms, this is the only one on the page...
greps around frantically
Oh... I see that the initial page that gets served, before we realize we have JS available, contains the entire widget content inside a form. I see what you mean now. That does seem like a rather important caveat to progressive bootstrap, and I don't see it documented anywhere. Did I miss something...?
Updated by Roel Standaert almost 4 years ago
That's more of a caveat that's specific to just Wt in general. You're just not supposed to use <form>
tags with Wt.
Wt simply has form widgets, and whenever a signal is sent, their value is updated. It's normally achieved through JavaScript, but when no JS support is available, that is achieved through a global <form>
tag.