Update va-select events

[andresriveratoro]

Chromatic

https://671-va-select-event--60f9b557105290003b387cd5.chromatic.com

Description

Closes department-of-veterans-affairs/vets-design-system-documentation#671

Testing done

E2E, Storybook

Screenshots

Acceptance criteria

• Replace vaKeyDown with keydown native event
• Update vaSelect event propagation

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[bkjohnson]

Do we know if the team is having an issue with the keydown event or the change one?

[andresriveratoro]

Do we know if the team is having an issue with the keydown event or the change one?

I believe it's the change event. I don't see any teams using the keydown event.

[bkjohnson]

Oh, this is what should make that test easier for the app team, right? I was too focused on the keydown changes to notice this the first time 🙃

[andresriveratoro]

The tests are still failing locally when using userEvent.click(await screen.findByText(/use your current location/i));. 😞

[bkjohnson]

I'm also in favor of this native event + handler replacing the custom one 👍

[andresriveratoro]

I have been unable to observe the vaChange event fire in vets-website tests.

This code allows you to select a new value using userEvent and the test passes, but vaChange isn't fired.

const select = await screen.findByTestId('providersSelect');
userEvent.selectOptions(select, 'Two');
expect(screen.getByRole('option', { name: 'Two' }).selected).to.equal(true);

This throws a Error: The given element does not have a value setter

fireEvent.change(select, { target: { value: 'Two' } });

Related Issues

testing-library/dom-testing-library#413
testing-library/dom-testing-library#742

[pdavies88]

@andresriveratoro can we notate your last comment on the ticket: department-of-veterans-affairs/vets-design-system-documentation#671 and tag Paul so he's aware