fix: selectOptions on options with role #542

testing-library · Jan 11, 2021 · b3f904e · b3f904e
1 parent 6c21e1f
commit b3f904e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 52 deletions.
diff --git a/src/__tests__/select-options.js b/src/__tests__/select-options.js
@@ -35,17 +35,6 @@ test('fires correct events on listBox select', () => {
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: ul[value="2"]
 
-    ul - pointerover
-    ul - pointerenter
-    ul - mouseover: Left (0)
-    ul - mouseenter: Left (0)
-    ul - pointermove
-    ul - mousemove: Left (0)
-    ul - pointerdown
-    ul - mousedown: Left (0)
-    ul - pointerup
-    ul - mouseup: Left (0)
-    ul - click: Left (0)
     li#2[value="2"][aria-selected=true] - pointerover
     ul[value="2"] - pointerenter
     li#2[value="2"][aria-selected=true] - mouseover: Left (0)

diff --git a/src/select-options.js b/src/select-options.js
@@ -36,53 +36,55 @@ function selectOptionsBase(newValue, select, values, init) {
 
   if (select.disabled || !selectedOptions.length) return
 
-  if (select.multiple) {
-    for (const option of selectedOptions) {
-      // events fired for multiple select are weird. Can't use hover...
-      fireEvent.pointerOver(option, init)
-      fireEvent.pointerEnter(select, init)
-      fireEvent.mouseOver(option)
-      fireEvent.mouseEnter(select)
-      fireEvent.pointerMove(option, init)
-      fireEvent.mouseMove(option, init)
-      fireEvent.pointerDown(option, init)
-      fireEvent.mouseDown(option, init)
-      focus(select, init)
-      fireEvent.pointerUp(option, init)
-      fireEvent.mouseUp(option, init)
-      selectOption(option)
-      fireEvent.click(option, init)
+  if (select instanceof HTMLSelectElement) {
+    if (select.multiple) {
+      for (const option of selectedOptions) {
+        // events fired for multiple select are weird. Can't use hover...
+        fireEvent.pointerOver(option, init)
+        fireEvent.pointerEnter(select, init)
+        fireEvent.mouseOver(option)
+        fireEvent.mouseEnter(select)
+        fireEvent.pointerMove(option, init)
+        fireEvent.mouseMove(option, init)
+        fireEvent.pointerDown(option, init)
+        fireEvent.mouseDown(option, init)
+        focus(select, init)
+        fireEvent.pointerUp(option, init)
+        fireEvent.mouseUp(option, init)
+        selectOption(option)
+        fireEvent.click(option, init)
+      }
+    } else if (selectedOptions.length === 1) {
+      click(select, init)
+      selectOption(selectedOptions[0])
+    } else {
+      throw getConfig().getElementError(
+        `Cannot select multiple options on a non-multiple select`,
+        select,
+      )
     }
-  } else if (selectedOptions.length === 1) {
-    click(select, init)
-    selectOption(selectedOptions[0])
-  } else {
-    throw getConfig().getElementError(
-      `Cannot select multiple options on a non-multiple select`,
-      select,
-    )
-  }
-
-  function selectOption(option) {
-    if (option.getAttribute('role') === 'option') {
+  } else if (select.getAttribute('role') === 'listbox') {
+    selectedOptions.forEach(option => {
       option?.setAttribute?.('aria-selected', newValue)
 
       hover(option, init)
       click(option, init)
       unhover(option, init)
-    } else {
-      option.selected = newValue
-      fireEvent(
-        select,
-        createEvent('input', select, {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-          ...init,
-        }),
-      )
-      fireEvent.change(select, init)
-    }
+    })
+  }
+
+  function selectOption(option) {
+    option.selected = newValue
+    fireEvent(
+      select,
+      createEvent('input', select, {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        ...init,
+      }),
+    )
+    fireEvent.change(select, init)
   }
 }