Page MenuHomePhabricator

Regression: Search form creating invalid markup in header and sticky header
Closed, ResolvedPublic

Description

After focusing the search input on modern Vector, invalid HTML is generated which embeds a form within a form with identical ID attributes. This also results in some unexpected styling side effects.

Some browsers may not be able to parse this correctly meaning search might be broken, but we've not seen any evidence of that yet.

<form action="/w/index.php" id="searchform" class="vector-search-box-form">
...
<form id="searchform" action="/w/index.php" class="wvui-typeahead-search__form">
..

Event Timeline

Change 743036 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Mount search to parent node of search form

https://gerrit.wikimedia.org/r/743036

Jdlrobson renamed this task from Search form creating invalid markup to Regression: Search form creating invalid markup.Dec 1 2021, 10:36 PM
Jdlrobson edited projects, added Vue.js; removed WVUI.
Jdlrobson renamed this task from Regression: Search form creating invalid markup to Regression: Search form creating invalid markup in header and sticky header.Dec 1 2021, 11:58 PM

Apologies for causing this issue. I should have made clearer that while new Vue() replaces the element it's given, createMwApp() appends to it instead (which is how Vue 3 behaves). That can cause CSS issues, which I was on the lookout for and didn't see, but I didn't realize that it had led to two forms with the same ID being nested inside each other.

Change 743036 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Mount search to parent node of search form

https://gerrit.wikimedia.org/r/743036

nray removed nray as the assignee of this task.
nray added a subscriber: nray.