Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

querySelectorAll returns wrong results when :disabled pseudo-class used #1159

Closed
Tracked by #8
ciepol opened this issue Nov 8, 2023 · 2 comments · Fixed by #1589
Closed
Tracked by #8

querySelectorAll returns wrong results when :disabled pseudo-class used #1159

ciepol opened this issue Nov 8, 2023 · 2 comments · Fixed by #1589
Assignees
Labels
bug Something isn't working

Comments

@ciepol
Copy link

ciepol commented Nov 8, 2023

Describe the bug
When :disabled pseudo-class is present in querySelectorAll it is ignored and result includes disabled elements.
Additionally when combined with :not() it is not selecting anything.
See examples below.

To Reproduce
Go to https://npm.runkit.com/happy-dom
and paste the code:

var happyDom = require("happy-dom")

function test(selector) { 
    console.log(
        selector,
        [...document.querySelectorAll(selector)].map((node) => `${node.nodeName} ${node.className}`)
    );
}

const window = new happyDom.Window();
const document = window.document;
document.body.innerHTML = `
    <button class="enabled-button">enabled button</button>
    <button class="disabled-button" disabled="">disabled button</button>
    <input class="enabled-input-button" value="enabled input button" type="button">
    <input class="disabled-input-button" value="disabled input button" disabled="" type="button">
    <a href="https://google.com">link</a>
    <input class="checked-checkbox" name="checkbox" type="checkbox" value="checkbox" checked="">
    <input class="unchecked-checkbox" name="checkbox2" disabled="" value="checkbox2" type="checkbox">
`;

test('button, a');
test('button:disabled'); // wrong - returns all buttons
test('[type="button"]:disabled'); // wrong - returns all input buttons
test('input:disabled'); // wrong - returns all inputs
test('button:not(:disabled)'); // wrong - returns none
test('[type="button"]:not(:disabled)'); // wrong - returns none
test('button:not(.disabled-button)');
test('input:checked');
test('input[type="checkbox"]:not(:checked)');

Expected behavior
It should select disabled elements. It should select enabled elements when combined with :not() pseudo-class.

Additional context
Might be related to #990 .

@ciepol ciepol added the bug Something isn't working label Nov 8, 2023
@csantos1113
Copy link

FWIW: the issue is also present in querySelector. I created this example https://stackblitz.com/edit/stackblitz-starters-s687yz?file=package.json,jsdom.spec.tsx,happy-dom.spec.tsx where we can compare jsdom vs happy-dom

npm run test in the terminal:

image

@capricorn86 capricorn86 self-assigned this Nov 6, 2024
capricorn86 added a commit that referenced this issue Nov 7, 2024
…query selectors (#1589)

* feat: [#1159] Adds support for the :disabled pseudo-class in CSS and query selectors

* chore: [#1159] Uses the correct name in comments

* chore: [#1159] Uses the correct name in comments
@capricorn86
Copy link
Owner

Thank you for reporting @ciepol and @csantos1113! 🙂

This has now been fixed. The reason for why it didn't work is because the ":disabled" pseudo-class wasn't supported yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
3 participants