Inifinite loop when clicking on a select inside a label element

[foxbunny]

• DOM Testing Library version: 6.12.0
• node version: 13.7.0
• npm (or yarn) version: 6.13.6

Relevant code or config:

Component:

export default function App() {
  return (
    <label>
      Select me:
      <select>
        <option value="1">first</option>
      </select>
    </label>
  );
}

Test:

test('click select', function () {
  let { getByRole } = render(<App/>)
  fireEvent.click(getByRole('listbox'))
})

What you did:

Simulated a click on a <select> element that is inside a <label> element.

What happened:

Get Maximum call stack size exceeded.

Reproduction:

https://codesandbox.io/s/eloquent-pike-7uw1h

Problem description:

When clicking a select (or possibly input) element which is inside a label, the code is thrown into an infinite loop, which shouldn't happen.

Suggested solution:

[kentcdodds]

Hi @foxbunny,

This works locally for me when I pull it down

So I'm guessing this is an issue with codesandbox. Please open an issue on codesandbox-client.

Thanks!

[foxbunny]

Code sandbox is a demo for an issue I've encountered locally, though.

[foxbunny]

I'll see if I can come up with a repro git repo.

[kentcdodds]

Gotcha. Yes, if you could do that, it would be very helpful. Thank you!

[hesxenon]

maybe related (or solvable) by testing-library/user-event#1237?