title: How to test trigger on change event by selecting data list
body: <p>How to test a situation where user selects option from data list? I am asserting <code>onChange</code> callback on the input using <code>@testing-library/user-event</code>.</p>
  <p>This is my React component:</p>
  <pre class="lang-js prettyprint-override"><code>// MyInput.js
  
  import React from &quot;react&quot;;
  
  const MyInput = ({ value, list, id, onChange }) =&gt; {
    return (
      &lt;label&gt;
        &lt;strong&gt;{id}&lt;/strong&gt;
        &lt;div&gt;
          &lt;input type=&quot;text&quot; value={value} onChange={onChange} list={id} /&gt;
          &lt;datalist id={id} aria-label=&quot;datalist-items&quot;&gt;
            {list.map((item) =&gt; (
              &lt;option
                key={`item-${item.id}`}
                aria-label=&quot;data-list-item&quot;
                value={item.value}
              /&gt;
            ))}
          &lt;/datalist&gt;
        &lt;/div&gt;
      &lt;/label&gt;
    );
  };
  
  export default MyInput;
  
  </code></pre>
  <p>This is my failing test</p>
  <pre class="lang-js prettyprint-override"><code>// MyInput.spec.js
  
  import React from &quot;react&quot;;
  import { render } from &quot;@testing-library/react&quot;;
  import userEvent from &quot;@testing-library/user-event&quot;;
  
  import MyInput from &quot;./MyInput&quot;;
  import data from &quot;./data.json&quot;;
  
  describe(&quot;MyInput&quot;, () =&gt; {
    it(&quot;should trigger onChange with selected option&quot;, () =&gt; {
      const onChange = jest.fn();
      const list = [...data.list];
      const screen = render(&lt;MyInput onChange={onChange} list={list} /&gt;);
  
      userEvent.selectOptions(screen.getByLabelText(&quot;datalist-items&quot;), &quot;first&quot;);
  
      expect(onChange).toHaveBeenCalledWith(&quot;first&quot;);
    });
  });
  
  </code></pre>
  <p>Data provided to component:</p>
  <pre><code>// data.json
  
  {
    &quot;list&quot;: [
      { &quot;id&quot;: 1, &quot;value&quot;: &quot;first&quot; },
      { &quot;id&quot;: 2, &quot;value&quot;: &quot;second&quot; }
    ]
  }
  
  </code></pre>
  <p>However that does not work. Test reports failure:</p>
  <pre><code>expect(jest.fn()).toHaveBeenCalledWith(...expected)
  
  Expected: &quot;first&quot;
  
  Number of calls: 0
  
    14 |     userEvent.selectOptions(screen.getByLabelText(&quot;datalist-items&quot;), &quot;first&quot;);
  &gt; 16 |     expect(onChange).toHaveBeenCalledWith(&quot;first&quot;);
    17 |   });
    18 | });
  </code></pre>
  <p>You can find a live example <a href="https://codesandbox.io/s/react-testing-library-datalist-onchange-6jnpv?file=/src/MyInput.spec.js:0-565" rel="nofollow noreferrer">in this CodeSandbox</a>.</p>
  <p>I want to simulate real-life scenario where user clicks into an input, the data list is rendered and user clicks one of the options. Should I be somehow targeting the rendered datalist instead? And how?</p>