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

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();
});

CodePudding user response：

You can use:

document.activeElement.blur();

to remove all focused elements.

CodePudding user response：

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.