From 1d0b41e5b7f4985f08a2396934be648f72c6ff0c Mon Sep 17 00:00:00 2001
From: Jordy <jordy.vandomselaar@dij.digital>
Date: Tue, 17 Dec 2019 16:52:46 +0100
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=F0=9F=A4=96=EF=B8=8F=20Add=20.ide?=
 =?UTF-8?q?a/=20to=20.gitignore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 82e2584c..2b60d167 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 coverage/
 dist/
+.idea/

From 1dd241def94465ca1cdaef267cce20f78b5718a7 Mon Sep 17 00:00:00 2001
From: Jordy <jordy.vandomselaar@dij.digital>
Date: Tue, 17 Dec 2019 17:05:19 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=EF=B8=8F=20select=20opt?=
 =?UTF-8?q?ions=20even=20if=20they=20are=20nested=20in=20optgroups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/react/selectoptions.js | 30 ++++++++++++++++++++++++++++++
 __tests__/vue/selectoptions.js   | 25 +++++++++++++++++++++++++
 src/index.js                     |  4 ++--
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/__tests__/react/selectoptions.js b/__tests__/react/selectoptions.js
index 4d556f41..6a49bf8e 100644
--- a/__tests__/react/selectoptions.js
+++ b/__tests__/react/selectoptions.js
@@ -248,4 +248,34 @@ describe("userEvent.selectOptions", () => {
     expect(getByTestId("val2").selected).toBe(true);
     expect(getByTestId("val3").selected).toBe(false);
   });
+
+  it("sets the selected prop on the selected OPTION using OPTGROUPS", () => {
+    const { getByTestId } = render(
+        <form>
+          <select multiple data-testid="element">
+            <optgroup label="test optgroup 1">
+              <option data-testid="val1" value="1">
+                1
+              </option>
+            </optgroup>
+            <optgroup label="test optgroup 2">
+            <option data-testid="val2" value="2">
+              2
+            </option>
+            </optgroup>
+            <optgroup label="test optgroup 1">
+            <option data-testid="val3" value="3">
+              3
+            </option>
+            </optgroup>
+          </select>
+        </form>
+    );
+
+    userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
+
+    expect(getByTestId("val1").selected).toBe(true);
+    expect(getByTestId("val2").selected).toBe(false);
+    expect(getByTestId("val3").selected).toBe(true);
+  });
 });
diff --git a/__tests__/vue/selectoptions.js b/__tests__/vue/selectoptions.js
index 0d178ef8..e6feb767 100644
--- a/__tests__/vue/selectoptions.js
+++ b/__tests__/vue/selectoptions.js
@@ -226,4 +226,29 @@ describe("userEvent.selectOptions", () => {
     expect(getByTestId("val2").selected).toBe(true);
     expect(getByTestId("val3").selected).toBe(false);
   });
+
+  it("sets the selected prop on the selected OPTION using OPTGROUPS", () => {
+    const { getByTestId } = render({
+      template: `
+        <form>
+          <select data-testid="element" multiple>
+            <optgroup label="test optgroup 1">
+               <option value="1" data-testid="val1">1</option>
+            </optgroup>
+            <optgroup label="test optgroup 2">
+                <option value="2" data-testid="val2">2</option>
+            </optgroup>
+            <optgroup label="test optgroup 3">
+                <option value="3" data-testid="val3">3</option>
+            </optgroup>
+          </select>
+        </form>`
+    });
+
+    userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
+
+    expect(getByTestId("val1").selected).toBe(true);
+    expect(getByTestId("val2").selected).toBe(false);
+    expect(getByTestId("val3").selected).toBe(true);
+  });
 });
diff --git a/src/index.js b/src/index.js
index 67e9ba82..22df1b71 100644
--- a/src/index.js
+++ b/src/index.js
@@ -158,8 +158,8 @@ const userEvent = {
     clickElement(element);
 
     const valArray = Array.isArray(values) ? values : [values];
-    const selectedOptions = Array.from(element.children).filter(
-      opt => opt.tagName === "OPTION" && valArray.includes(opt.value)
+    const selectedOptions = Array.from(element.querySelectorAll('option')).filter(
+      opt => valArray.includes(opt.value)
     );
 
     if (selectedOptions.length > 0) {