From e1d9282012efcd9f62799ab168bd888e64ec1768 Mon Sep 17 00:00:00 2001
From: Haruka <204652671+9426Haruka@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:30:41 +0800
Subject: [PATCH] fix(page-controller): dispatch input before change on select
 option

---
 packages/page-controller/src/actions.test.ts | 29 ++++++++++++++++++++
 packages/page-controller/src/actions.ts      |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 packages/page-controller/src/actions.test.ts

diff --git a/packages/page-controller/src/actions.test.ts b/packages/page-controller/src/actions.test.ts
new file mode 100644
index 000000000..35df39b49
--- /dev/null
+++ b/packages/page-controller/src/actions.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { selectOptionElement } from './actions'
+
+describe('selectOptionElement', () => {
+	it('updates the value and dispatches input before change', async () => {
+		const select = document.createElement('select')
+		const firstOption = document.createElement('option')
+		firstOption.value = 'one'
+		firstOption.textContent = 'One'
+		const secondOption = document.createElement('option')
+		secondOption.value = 'two'
+		secondOption.textContent = 'Two'
+
+		select.append(firstOption, secondOption)
+		document.body.append(select)
+
+		const events: string[] = []
+		select.addEventListener('input', () => events.push('input'))
+		select.addEventListener('change', () => events.push('change'))
+
+		await selectOptionElement(select, 'Two')
+
+		expect(select.value).toBe('two')
+		expect(events).toEqual(['input', 'change'])
+
+		select.remove()
+	})
+})
diff --git a/packages/page-controller/src/actions.ts b/packages/page-controller/src/actions.ts
index e90326eb3..61b2cc9a9 100644
--- a/packages/page-controller/src/actions.ts
+++ b/packages/page-controller/src/actions.ts
@@ -248,6 +248,7 @@ export async function selectOptionElement(selectElement: HTMLSelectElement, opti
 	}
 
 	selectElement.value = option.value
+	selectElement.dispatchEvent(new Event('input', { bubbles: true }))
 	selectElement.dispatchEvent(new Event('change', { bubbles: true }))
 
 	await waitFor(0.1) // Wait to ensure change event processing completes