selectOptions fails on options with role attribute

[comatory]

• @testing-library/user-event version:

12.6.0

• Testing Framework and version:

• jest@26.6.0

• DOM Environment:

• not sure, I'm using react-scripts@3.4.3 in CodeSandbox

Relevant code or config

// Select.js

import React from "react";

const Select = ({ value, options, role, onChange }) => {
  return (
    <select
      value={value}
      onChange={onChange}
      role={role === null ? undefined : "listbox"}
      data-testid="select"
    >
      {options.map(({ label, value }) => (
        <option
          key={`option-${value}`}
          value={value}
          role={role === null ? undefined : "option"}
          data-testid={`option-${value}`}
        >
          {label}
        </option>
      ))}
    </select>
  );
};

export default Select;

// Select.spec.js
  it("should call onChange callback", () => {
    const onChange = jest.fn();
    const options = [
      { label: "Foo", value: "1" },
      { label: "Bar", value: "2" }
    ];
    const screen = render(
      <Select value="1" options={options} onChange={onChange} />
    );

    userEvent.selectOptions(screen.getByTestId("select"), "2");

    expect(onChange).toHaveBeenCalledTimes(1);
  });

What you did:

I used role property on my react component. My native select component has role listbox. I created a test for identifying if onChange handler is called.

What happened:

When using userEvent.selectOptions my onChange handler is not called. However when role attribute is removed, the test passes.

Reproduction repository:

See this sandbox: https://codesandbox.io/s/user-event-changle-handler-with-role-p78f5?file=/src/Select.spec.js:190-586

Problem description:

change event does not seem to be triggered when the DOM element has role property defined.

Suggested solution:

[comatory]

Clarification: Actually it seems to be a problem not with role present on select DOM node, but actually option DOM node.

[ph-fritsche]

resolved in 12.6.1