Third Party Select Boxes Not Working.

[MarkTallentire]

Describe the bug A clear and concise description of what the bug is.

Cannot get validation warnings to trigger when using third party library (Quasar)'s dropdown boxes.

To Reproduce Steps to reproduce the behavior:

In the DOM I can click a dropdown and then click off it without selecting anything it will raise the validation error.

In my test I simulate this by doing the following

const type = await screen.getByTestId('type');
await fireEvent.click(type);
await fireEvent.click(status); //Click something else to de-select the dropdown
expect(screen.findByText(/Location type is required/i)).to.exist;

However this test fails. I belive it is due to the way Quasar handles the dropdowns and the fact that they're teleport components but I'm looking for any kind of workaround for this.

Expected behavior The test to pass as in the DOM the error message is clearly visible.

[afontcu]

Hi,

It would be hard for anyone to help you without additional context – what version of Vue/VTL are you using? What does a minimal expression of the component and the test look like? These are critical bits of information to provide any guidance.

btw, screen.findByText is async, so you should await. I'm not sure this would help with your issue (mostly due to what I outlined above) but it is worth a try.

in any case, it doesn't look like a bug in VTL so I'm removing the label for now.

thanks!!

[MarkTallentire]

Hi,

Thanks for coming back to me. I have created a small repo that shows off the issue here https://github.com/MarkTallentire/selecttest

If you have a few minutes spare I would love if you could take a look and see if there's a solution. All the code is in ExampleComponent.vue and ExampleComponent.test.ts

Thanks, Mark!