diff --git a/src/user-event/__tests__/helpers/utils.js b/src/user-event/__tests__/helpers/utils.js index c08b3076..e7415e20 100644 --- a/src/user-event/__tests__/helpers/utils.js +++ b/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 = ` - + + + ` document.body.append(form) diff --git a/src/user-event/__tests__/select-options.js b/src/user-event/__tests__/select-options.js index db1ca6be..aea8d791 100644 --- a/src/user-event/__tests__/select-options.js +++ b/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) +}) diff --git a/src/user-event/select-options.js b/src/user-event/select-options.js index 9c3d60a2..1df1792d 100644 --- a/src/user-event/select-options.js +++ b/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) {