Duplicate IDs exist
I have a chrome extension installed that detects when there are duplicate IDs in the html of a web page. On the diff view of merge requests, I see the following (I list some duplicates as many times as there is a duplicate):
Shape, Oval, Shape, Oval, Shape, Oval, Shape, Oval, Shape, Oval, Shape, Oval, Shape, Oval, Shape, Oval, notes, notes, target_id, target_type, note_note, target_id, target_type, note_note, target_type, target_id, note_note
Summary
Some HTML elements have IDs that are not unique. In some cases, you may not be using the IDs. From what I understand, if you use tools like jQuery, depending on JS implementation for a given browser, you may end up getting something other than the first element with the ID. This could lead to some browsers being less deterministic than others (trying to reproduce a bug caused by this would not work unless you use the same browser or JS implementation.
Steps to reproduce
- Load a merge request. e.i. https://gitlab.com/something/a-repo/merge_requests/14/diffs
- Run the below code in the JS console
var counter = 0;
//must use Chrome's event listener system to subscribe to node insertion event
document.addEventListener('DOMNodeInserted', function() {
var tempCounter = ++counter;
setTimeout(function() {
if(tempCounter !== counter)
return;
detectDuplicateIDs();
}, 5000);
});
detectDuplicateIDs();
function detectDuplicateIDs() {
//gather duplicate IDs
var duplicate_ids = [];
$('[id]').map(function(i, el) {
$id = $(el).attr('id');
if($('[id="'+$id+'"]').length > 1)
duplicate_ids.push($id);
});
if(duplicate_ids.length > 0) {
prompt('duplicate ids exist!', duplicate_ids.join(', '));
} else {
console.log('No duplicate IDs detected on last check.');
}
}
Example Project
(If possible, please create an example project here on GitLab.com that exhibits the problematic behaviour, and link to it here in the bug report)
(If you are using an older version of GitLab, this will also determine whether the bug has been fixed in a more recent version)
What is the current bug behavior?
IDs are duplicated. For now, no apparent bugs (on my browser). Can't say I have tried all others.
What is the expected correct behavior?
HTML IDs are unique.
Possible fixes
Do not create elements with IDs that are likely not going to be unique, such as "Oval". Use class instead.