querySelectorAll is not always returning elements in document order

[alexgallardo]

Describe the bug
Incorrect order of elements when using document.querySelectorAll under certain circumstances. See "Additional context" for a technical description.

To Reproduce

import { Window } from "happy-dom";

const window = new Window();
const document = window.document;

document.body.innerHTML = `
<div>0</div>
<button>1</button>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
`;

document
  .querySelectorAll("button")
  .forEach((button) => console.log(button.textContent));

// Output:
// 1
// 10
// 11
// 8
// 9

Expected behavior
document.querySelectorAll should return the elements in document order.

Additional context
In the QuerySelector class, findAll method, when iterating through the elements, the position of every one is stored as a string using its index:

happy-dom/packages/happy-dom/src/query-selector/QuerySelector.ts

Line 224 in 2c62156

const position = (documentPosition ? documentPosition + '>' : '') + i;

Later, in the querySelectorAll method, that position is used to sort the results:

happy-dom/packages/happy-dom/src/query-selector/QuerySelector.ts

Line 62 in 2c62156

const keys = Object.keys(matchesMap).sort();

Given that individual characters are compared when sorting strings, items with an index of 10 to 19, 100 to 199 and so on will appear before items with index of 3, 4...

Something like adding leading zeroes to the position of the elements of every level up to the number of digits of children.length - 1 would fix the issue without changing the way they are sorted, but since performance is a selling point vs jsdom, maybe a more complex solution is preferable.

[capricorn86]

Thank you for reporting @alexgallardo! 🙂

I have fixed the problem now.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.20.1

[capricorn86]

The sorting mechanism was sorting incorrectly as it sorted by characters and numbers came in the wrong order (1, 10, 11, 2, 3, 4 etc.). The unit test did not cover this.