diff --git a/src/__tests__/deselect-options.js b/src/__tests__/deselect-options.js index bf73a731..84fb9618 100644 --- a/src/__tests__/deselect-options.js +++ b/src/__tests__/deselect-options.js @@ -55,6 +55,8 @@ test('blurs previously focused element', () => { select[name="select"][value=[]] - focusin option[value="1"][selected=false] - pointerup option[value="1"][selected=false] - mouseup: Left (0) + select[name="select"][value=[]] - input + select[name="select"][value=[]] - change option[value="1"][selected=false] - click: Left (0) `) }) diff --git a/src/__tests__/select-options.js b/src/__tests__/select-options.js index 64fdf0bf..c28c27de 100644 --- a/src/__tests__/select-options.js +++ b/src/__tests__/select-options.js @@ -133,3 +133,29 @@ test('does not select anything if options are disabled', () => { expect(o2.selected).toBe(false) expect(o3.selected).toBe(false) }) + +test('should call onChange/input bubbling up the event when a new option is selected', () => { + const {select, form} = setupSelect({multiple: true}) + const onChangeSelect = jest.fn() + const onChangeForm = jest.fn() + const onInputSelect = jest.fn() + const onInputForm = jest.fn() + addListeners(select, { + eventHandlers: {change: onChangeSelect, input: onInputSelect}, + }) + addListeners(form, { + eventHandlers: {change: onChangeForm, input: onInputForm}, + }) + + expect(onChangeSelect).toHaveBeenCalledTimes(0) + expect(onChangeForm).toHaveBeenCalledTimes(0) + expect(onInputSelect).toHaveBeenCalledTimes(0) + expect(onInputForm).toHaveBeenCalledTimes(0) + + userEvent.selectOptions(select, ['1']) + + expect(onChangeForm).toHaveBeenCalledTimes(1) + expect(onChangeSelect).toHaveBeenCalledTimes(1) + expect(onInputSelect).toHaveBeenCalledTimes(1) + expect(onInputForm).toHaveBeenCalledTimes(1) +}) diff --git a/src/select-options.js b/src/select-options.js index 4c55144b..a63cd238 100644 --- a/src/select-options.js +++ b/src/select-options.js @@ -60,8 +60,16 @@ function selectOptionsBase(newValue, select, values, init) { function selectOption(option) { option.selected = newValue - fireEvent(select, createEvent('input', select, init)) - fireEvent(select, createEvent('change', select, init)) + fireEvent( + select, + createEvent('input', select, { + bubbles: true, + cancelable: false, + composed: true, + ...init, + }), + ) + fireEvent.change(select, init) } }