Browser Compatibility Issue: querySelector(':has()') Not Supported in Older Browsers

[elbaylot]

Flux version

v1.1.0

Livewire version

v3.5.17

What is the problem?

Description

The current implementation of the button() method in select.js uses the CSS :has() pseudo-class which isn't supported in older versions of Chrome and other browsers. This causes a DOMException when trying to find a button that has a popover element as its next sibling.

• Can I Use page : https://caniuse.com/css-has

Error message:

CopyUncaught DOMException: Failed to execute 'querySelector' on 'Element': 'button:has(+ [popover])' is not a valid selector.

bug video :

• Nothing happen when user click on the select

Enregistrement.de.l.ecran.2024-12-18.a.09.06.40.mov

Code snippets

Current implementation:

livewire/flux-pro/js/select.js:270

button() {
    // @todo: fix this:
    return this.querySelector('button:has(+ [popover])')
}

Proposed solution :

button() {
    const buttons = this.querySelectorAll('button');

    return Array.from(buttons).find(button => {
        const nextElement = button.nextElementSibling;
        return nextElement && nextElement.hasAttribute('popover');
    });
}

How do you expect it to work?

• The selector should work across all supported browsers (including older versions)

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.