Cannot test datalist elements with user-event

Reproduction example

https://github.com/SirRegion/user-event-datalist-example

Prerequisites

To reproduce you need an input with a datalist

<label htmlFor="browser">Choose your browser from the list:</label>
        <input list="browsers" name="browser" id="browser"/>

        <datalist id="browsers">
          <option value="Edge"/>
          <option value="Firefox"/>
          <option value="Chrome"/>
          <option value="Opera"/>
          <option value="Safari"/>
        </datalist>

and this test:

test('shows datalist', async () => {
  userEvent.setup();
  render(<App />);
  const datalist = screen.getByLabelText("Choose your browser from the list:");
  expect(datalist).toBeInTheDocument();
  await userEvent.selectOptions(datalist,"Edge")
  expect(datalist).toHaveValue("Edge")
});

Expected behavior

This should select the element "Edge" and set the value of the input to "Edge"

Actual behavior

The test fails with

TestingLibraryElementError: Value "Edge" not found in options

    Ignored nodes: comments, script, style
    <input
      id="browser"
      list="browsers"
      name="browser"
    />

I think this is caused by the testing library excluding the datalist element and only searching in the input element, which does not have any children.

User-event version

14.4.3

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

I'm willing to submit a PR, if someone can point me into the right direction on how to fix this issue.

Thanks in advance for your help :)

Start with the reproduction example at https://github.com/SirRegion/user-event-datalist-example and run the shown test against the reported versions. Then trace selectOptions handling for an input associated with a datalist; done means the option "Edge" is selected and the input value assertion passes with a regression test.