Update ValidityState when editing values

[ph-fritsche]

Problem description:

When changing an element in UI, the browser updates element.validity.
user-event maintains the UI value as it diverges from the IDL value, but it does not update element.validity accordingly.

There was a test asserting this behavior:

user-event/tests/type/index.ts

Lines 531 to 542 in a747b0a

	test('typing an invalid input value', async () => {
	const {element} = setup<HTMLInputElement>('<input type="number" />')
	await userEvent.type(element, '3-3')
	expect(element).toHaveValue(null)
	// THIS IS A LIMITATION OF THE BROWSER
	// It is impossible to programmatically set an input
	// value to an invlid value. Not sure how to work around this
	// but the badInput should actually be "true" if the user types "3-3"
	expect(element.validity.badInput).toBe(false)
	})

Suggested solution:

Implement ValidityState and update it when changing UI value.

[kmaid]

My team is also suffering with this problem on a HTML 5 date field. In the browser you can partially fill out a date whereas in react testing library we can only input complete dates.

We have worked around the problem by extracting the function and testing it in isolation but its not an ideal solution.

[challet]

// THIS IS A LIMITATION OF THE BROWSER
// It is impossible to programmatically set an input
// value to an invlid value. Not sure how to work around this

I don't know if that would help but the customError member of ValidiyState can be set through setCustomValidity