From 7ea7a77a87ca1e6ce4e461ce87c0a0a1e8dd77a7 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 12 May 2022 12:36:20 +0200
Subject: [PATCH] fix(selectOptions): wait after each click (#951)

---
 src/utility/selectOptions.ts  | 12 +++++++++++-
 tests/react/_env/setup-env.js |  3 +++
 tests/react/index.tsx         | 35 ++++++++++++++++++++++++++++++++++-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/utility/selectOptions.ts b/src/utility/selectOptions.ts
index 04e44ef2..520c62d2 100644
--- a/src/utility/selectOptions.ts
+++ b/src/utility/selectOptions.ts
@@ -1,5 +1,11 @@
 import {getConfig} from '@testing-library/dom'
-import {focus, hasPointerEvents, isDisabled, isElementType} from '../utils'
+import {
+  focus,
+  hasPointerEvents,
+  isDisabled,
+  isElementType,
+  wait,
+} from '../utils'
 import {Config, Instance} from '../setup'
 
 export async function selectOptions(
@@ -100,6 +106,8 @@ async function selectOptionsBase(
         if (withPointerEvents) {
           this.dispatchUIEvent(option, 'click')
         }
+
+        await wait(this[Config])
       }
     } else if (selectedOptions.length === 1) {
       const withPointerEvents =
@@ -124,6 +132,8 @@ async function selectOptionsBase(
         this.dispatchUIEvent(select, 'mouseup')
         this.dispatchUIEvent(select, 'click')
       }
+
+      await wait(this[Config])
     } else {
       throw getConfig().getElementError(
         `Cannot select multiple options on a non-multiple select`,
diff --git a/tests/react/_env/setup-env.js b/tests/react/_env/setup-env.js
index 2f4625df..308baa70 100644
--- a/tests/react/_env/setup-env.js
+++ b/tests/react/_env/setup-env.js
@@ -6,6 +6,9 @@ if (global.REACT_VERSION) {
   jest.mock('react-dom', () =>
     jest.requireActual(`reactDom${global.REACT_VERSION}`),
   )
+  jest.mock('react-dom/test-utils', () =>
+    jest.requireActual(`reactDom${global.REACT_VERSION}/test-utils`),
+  )
   jest.mock('react-is', () =>
     jest.requireActual(`reactIs${global.REACT_VERSION}`),
   )
diff --git a/tests/react/index.tsx b/tests/react/index.tsx
index 1f87e886..60cab9c0 100644
--- a/tests/react/index.tsx
+++ b/tests/react/index.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {render, screen} from '@testing-library/react'
+import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '#src'
 import {getUIValue} from '#src/document'
 import {addListeners} from '#testHelpers'
@@ -173,3 +173,36 @@ describe('typing in a formatted input', () => {
     expect(element).toHaveValue('$234')
   })
 })
+
+test('change select with delayed state update', async () => {
+  function Select() {
+    const [selected, setSelected] = useState<string[]>([])
+
+    return (
+      <select
+        multiple
+        value={selected}
+        onChange={e => {
+          const values = Array.from(e.target.selectedOptions).map(o => o.value)
+          setTimeout(() => setSelected(values))
+        }}
+      >
+        <option>Chrome</option>
+        <option>Firefox</option>
+        <option>Opera</option>
+      </select>
+    )
+  }
+
+  render(<Select />)
+
+  await userEvent.selectOptions(
+    screen.getByRole('listbox'),
+    ['Chrome', 'Firefox'],
+    {delay: 10},
+  )
+
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toHaveValue(['Chrome', 'Firefox'])
+  })
+})