fix(userEvent): don't select option if select is disabled (#641)

* Exit early from selectOption if select is disabled

* fix(userEvent): Port test to dom-testing-library

* fix(userEvent): Exit early if options are disabled

Co-authored-by: Ben Dyer <dyer.ben@protonmail.com>

Author: nickserv

src/user-event/__tests__/helpers/utils.js

@@ -24,13 +24,21 @@ function setup(ui, {eventHandlers} = {}) {
   return {element, ...addListeners(element, {eventHandlers})}
 }
 
-function setupSelect({multiple = false} = {}) {
+function setupSelect({
+  disabled = false,
+  disabledOptions = false,
+  multiple = false,
+} = {}) {
   const form = document.createElement('form')
   form.innerHTML = `
-    <select name="select" ${multiple ? 'multiple' : ''}>
-      <option value="1">1</option>
-      <option value="2">2</option>
-      <option value="3">3</option>
+    <select
+      name="select"
+      ${disabled ? 'disabled' : ''}
+      ${multiple ? 'multiple' : ''}
+    >
+      <option value="1" ${disabledOptions ? 'disabled' : ''}>1</option>
+      <option value="2" ${disabledOptions ? 'disabled' : ''}>2</option>
+      <option value="3" ${disabledOptions ? 'disabled' : ''}>3</option>
     </select>
   `
   document.body.append(form)

src/user-event/__tests__/select-options.js

@@ -107,3 +107,29 @@ test('throws an error if multiple are passed but not a multiple select', async (
   const error = await userEvent.selectOptions(select, ['2', '3']).catch(e => e)
   expect(error.message).toMatch(/cannot select multiple/i)
 })
+
+test('does not select anything if select is disabled', async () => {
+  const {select, options, getEventSnapshot} = setupSelect({disabled: true})
+  await userEvent.selectOptions(select, '2')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: select[name="select"][value="1"]`,
+  )
+  const [o1, o2, o3] = options
+  expect(o1.selected).toBe(true)
+  expect(o2.selected).toBe(false)
+  expect(o3.selected).toBe(false)
+})
+
+test('does not select anything if options are disabled', async () => {
+  const {select, options, getEventSnapshot} = setupSelect({
+    disabledOptions: true,
+  })
+  await userEvent.selectOptions(select, '2')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: select[name="select"][value=""]`,
+  )
+  const [o1, o2, o3] = options
+  expect(o1.selected).toBe(false)
+  expect(o2.selected).toBe(false)
+  expect(o3.selected).toBe(false)
+})

src/user-event/select-options.js

@@ -14,21 +14,25 @@ async function selectOptionsBase(newValue, select, values, init) {
   }
   const valArray = Array.isArray(values) ? values : [values]
   const allOptions = Array.from(select.querySelectorAll('option'))
-  const selectedOptions = valArray.map(val => {
-    if (allOptions.includes(val)) {
-      return val
-    } else {
-      const matchingOption = allOptions.find(o => o.value === val)
-      if (matchingOption) {
-        return matchingOption
+  const selectedOptions = valArray
+    .map(val => {
+      if (allOptions.includes(val)) {
+        return val
       } else {
-        throw getConfig().getElementError(
-          `Value "${val}" not found in options`,
-          select,
-        )
+        const matchingOption = allOptions.find(o => o.value === val)
+        if (matchingOption) {
+          return matchingOption
+        } else {
+          throw getConfig().getElementError(
+            `Value "${val}" not found in options`,
+            select,
+          )
+        }
       }
-    }
-  })
+    })
+    .filter(option => !option.disabled)
+
+  if (select.disabled || !selectedOptions.length) return
 
   if (select.multiple) {
     for (const option of selectedOptions) {