fix: update onChange/input events fired on selected option (#370)

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)
   `)
 })

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)
+})

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)
   }
 }