docs: fix `pointerName` property in pointer API docs

[netlify[bot]]

✅ Deploy Preview for testing-library ready!

Name	Link
🔨 Latest commit	3ad818d57b7ff1b24405c7ba1bd8b2bea0888753
🔍 Latest deploy log	https://app.netlify.com/sites/testing-library/deploys/661eb3260b88b000083a8a4c
😎 Deploy Preview	https://deploy-preview-1383--testing-library.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MatanBobi]

Thanks @ZeeshanTamboli. It looks like this is indeed the required behavior, if something isn't working properly, please file an issue for this one in the user-event repo.

[ZeeshanTamboli]

@MatanBobi @timdeschryver I'm trying to test textarea resizing with the user-event library to ensure it doesn't glitch. Here's what I've done:

  it.only('should not glitch when resizing textarea', async function test() {
    if (/jsdom/.test(window.navigator.userAgent)) {
      this.skip();
    }

    const { container } = render(<TextareaAutosize />);
    const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!;

    console.log('before textarea.style.height: ', textarea.style.height);

    // Get the element's dimensions
    const { top, left, width, height } = textarea.getBoundingClientRect();

    // Calculate coordinates of bottom-right corner
    const bottomRightX = left + width;
    const bottomRightY = top + height;

    const user = userEvent.setup();

    await user.pointer([
      {
        keys: '[MouseLeft>]',
        target: textarea,
      },
      {
        pointerName: 'MouseLeft',
        target: textarea,
        coords: { clientX: bottomRightX, clientY: bottomRightY },
      },
      '[/MouseLeft]',
    ]);

    console.log('after textarea.style.height: ', textarea.style.height);
  });

But I'm getting an error saying Trying to access pointer "MouseLeft" which does not exist. If I change pointerName to mouse, it doesn't error. In our existing tests, we use pointerName: 'mouse'. Or is it that for mouse events, pointerName should be mouse, and for touch events, it should be TouchA, TouchB, and so on? If that's the case, it's confusing. The documentation says:

You can declare which pointer is moved per pointerName property. This defaults to mouse.

Do you still want me to create an issue?

[MatanBobi]

I assume that this is different for pointers, let's wait for @ph-fritsche to respond as he knows this area best :) I'll re-open.

[ph-fritsche]

There is {pointerId: 1, pointerType: 'mouse'} for the mouse. This pointerId is reused and the pointer always exist and can have e.g. pointermove events – no matter if a button is pressed. You get a pointerdown for the first button that is pressed, and a pointerup for the last button that is released.

For a touch device there is a new {pointerId: n, pointerType: 'touch'} for every pointerdown event. The subsequent events with the same pointer share that pointerId. If you lift the finger from the touch device and touch it again, a new pointer is established.

Therefore I implemented pointerName to distinguish multiple touch pointers in the test code. For mouse you can just omit it (or set it to mouse).

[ZeeshanTamboli]

@ph-fritsche Thanks for the explanation! I understand it now. This section was confusing for me earlier, but now it's clear to me after your explanation. I'll close this PR.