How can I trigger the 'blur' event while testing v-autocomplete using Vue Testing Library?

Question

I'm writing a test for Vuetify v-autocomplete wrapper component which checks displayed error message on blur. However error output shows that input select remains open and base element has focus class. I can't figure out what I'm doing wrong. Test code looks like:

it('should display error if field is empty', async () => {
    const { queryByLabelText, queryByText } = renderWithVuetify(MyComponent);

    await fireEvent.click(queryByLabelText('Label')); // Open v-autocomplete input select
    await fireEvent.click(document); // Should 'blur' input. Tried different elements here like document.body, Vuetify app root etc. Even dummy element next to v-autocomplete

    expect(queryByText('This field is required')).not.toBeNull();
});

ruby_newbie · Accepted Answer · 2022-02-17 17:12:08Z

2

You can use:

document.activeElement.blur();

to remove all focused elements.

answered Feb 17, 2022 at 17:12

ruby_newbie

3,3033 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Rutkowski · Accepted Answer · 2022-02-17 20:46:12Z

0

It turned out in the old Vuetify version ClickOutside directive checks event isTrusted property, which is obviously set to false if event is dispatched programmatically. Updating vuetify or hacking addEventListener resolves the issue.

answered Feb 17, 2022 at 20:46

Adrian Rutkowski

3392 silver badges7 bronze badges

Collectives™ on Stack Overflow

How can I trigger the 'blur' event while testing v-autocomplete using Vue Testing Library?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related