x-mask triggers :user-invalid initially on required input

[Tim-Wils]

Hi!
The other day I was working on some form logics and stumbled upon a, what I think is a bug.
The bug is that x-mask is initially triggering the :user-invalid css if the value is empty and the input has the required attribute.
It can be seen here:
https://codepen.io/tim-wils/pen/KKELypy

I dived into the repo and could bring it back to the x-mask directive setInput() function, where the el.value is always set and that's triggering the :user-invalid. I created a solution where the formattedValue is not the same as the current el.value and only then set the value.
That seems to work, so I created a failing test, but the failing test with the :user-invalid seems to always pass.

Workaround: ( the workaround is only in the fuction let setInput = ()
https://codepen.io/tim-wils/pen/wvObPKg

This was the test I created:

test('x-mask with css :user-valid',
    [html`
        <input required x-data x-mask="999">
        <style>
            input {height: 30px;} 
            input:user-invalid {height: 10px;}
        </style>
    `],
    ({ get }) => {
        get('input').should(haveComputedStyle('height', '30px'))
    }
)

Could someone help/confirm this is a bug and confirm the solution, so that we can create a PR to fix this?

[ekwoka]

For the test, it is probably easier to just check if el.matches(':user-invalid') just so that you are testing the thing itself directly.

Might even be a part of the JS api on the HTMLInputElement that would indicate it even more directly...

That does seem like a bug for sure...

[ekwoka]

It should allow all Dom apis.

But here you can probably just do get('input:user-invalid').shouldBeUndefined() or whatever the API is for cypress.

[Tim-Wils]

@ekwoka This should have done the trick get('input:user-invalid').should(notExist()), but seems like Cypress doesn't support the selector yet: Error: Syntax error, unrecognized expression: unsupported pseudo: user-invalid

[ekwoka]

Might need to use whatever cypress exposes to allow you to run your own code into the browser.

[Tim-Wils]

@ekwoka Tried another approach:

 get('input').then(($input) => {
            const el = $input[0]
            if (el.matches(':user-invalid')) {
                return 1
            } else {
                return 2
            }
        }).should('equal', 1)

But it Seems like Electron (headless) is the default browser for Cypress to test in, which doesn't support this selector yet, so now I don't know what to do...

[ekwoka]

Electron isn't a browser?

Electron uses chromium...

Maybe it needs an update 😂