click(button) doesn't trigger the onClick while pointer() does and am not sure why

[smokinjoe]

I've recently updated "@testing-library/user-event" to 14.4.3 and am updating all of our tests that were working on 13.1.x

However, when coming across a test where I am trying to trigger the onClick attribute of a button, relying on user.click(buttonElement) doesn't seem to trigger the onClick while user.pointer({ target: buttonElement, keys: '[MouseLeft]' }) does.

I'm confused as to where the line is drawn on how to test user interactions with elements that carry an onClick. Relying on user.pointer doesn't seem like the correct pattern for this.

Some pseudocode:

...

const TableRowActions = ({ onClick, icon, title }) => {
  return (
    <button
        className={classes.enabled}
        onClick={() => onClick(id)}
        title={title}
    >
        <FontAwesomeIcon size="lg" icon={icon} />
    </button>
  );
};

const user = userEvent.setup();

render(<Table {...data} />);

const editButton = screen.getByTitle(title);

await user.click(editButton); // does not trigger onClick
await user.pointer({ target: editButton, keys: '[MouseLeft]' }); // triggers onClick

It's a little more complex than what I have here, but I'm just really confused as to what is going on. editButton is clearly defined if I examine it in my test - why wouldn't user.click work?

[githorse]

I'm having what seems like the same problem.. user.click() appears to succeed but does not actually click anything, but fireEvent.click() works:

const user = userEvent.setup()

render(...)

const button = await waitFor(document.getElementById('id'))
console.log(`Is the button there?`, button) // yep, it's there

await user.click(button) // doesn't work :(
await fireEvent.click(button) // works :)

user.click() seems to work in other places as expected, but I can't get it to click any buttons. It's not the await issue; I'm using await but that doesn't help.

@smokinjoe did you ever figure this out?

UPDATE:

I tracked down my specific problem: #1211.