From 82aeab17e00c84bcf1a317eededec1e4f9cf85e6 Mon Sep 17 00:00:00 2001
From: Zeke Lu <lvzecai@gmail.com>
Date: Sat, 15 May 2021 00:35:42 +0800
Subject: [PATCH] dispatch input and change event after SetValue

---
 js.go              |  7 ++++++-
 query_test.go      | 16 ++++++++++++++++
 testdata/form.html | 14 ++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/js.go b/js.go
index 05e26a73..9d106221 100644
--- a/js.go
+++ b/js.go
@@ -78,7 +78,12 @@ const (
 	// setAttributeJS is a javascript snippet that sets the value of the specified
 	// node, and returns the value.
 	setAttributeJS = `(function(a, n, v) {
-		return a[n] = v;
+		a[n] = v;
+		if (n === 'value') {
+			a.dispatchEvent(new Event('input', { bubbles: true }));
+			a.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+		return a[n];
 	})(%s, %q, %q)`
 
 	// visibleJS is a javascript snippet that returns true or false depending on if
diff --git a/query_test.go b/query_test.go
index 0a30873a..4495ecd0 100644
--- a/query_test.go
+++ b/query_test.go
@@ -2,6 +2,8 @@ package chromedp
 
 import (
 	"bytes"
+	"context"
+	"errors"
 	"fmt"
 	"image/png"
 	"io/ioutil"
@@ -557,6 +559,7 @@ func TestSetValue(t *testing.T) {
 		{`#form > input[type="text"]`, ByQueryAll},
 		{`#bar`, ByID},
 		{`document.querySelector("#bar")`, ByJSPath},
+		{`#select`, ByQuery},
 	}
 
 	for i, test := range tests {
@@ -578,6 +581,19 @@ func TestSetValue(t *testing.T) {
 			if value != "FOOBAR" {
 				t.Errorf("expected `FOOBAR`, got: %s", value)
 			}
+
+			ctx, cancel = context.WithTimeout(ctx, 2*time.Second)
+			defer cancel()
+			if err := Run(ctx,
+				WaitVisible("#event-input", ByQuery),
+				WaitVisible("#event-change", ByQuery),
+			); err != nil {
+				if errors.Is(err, context.DeadlineExceeded) {
+					t.Fatal("input and/or change events not fired")
+				} else {
+					t.Fatalf("got error: %v", err)
+				}
+			}
 		})
 	}
 }
diff --git a/testdata/form.html b/testdata/form.html
index fc1e5ce7..b738b227 100644
--- a/testdata/form.html
+++ b/testdata/form.html
@@ -14,10 +14,24 @@
     <input id="keyword" type="text" name="q" value="chromedp"/><br>
     <input id="foo" type="text" name="foo" value="foo"/><br>
     <textarea id="bar" rows="4" cols="50">bar</textarea><br>
+    <select id="select">
+      <option value="">First</option>
+      <option value="FOOBAR">Second</option>
+    </select>
     <input id="btn1" name="reset" type="reset" value="Reset">
     <input id="btn2" name="submit" type="submit" value="Submit">
     <p id="inner-hidden">this is <span style="display: none;">hidden</span></p>
     <p id="hidden" style="display: none;">hidden</p>
   </form>
+  <span id="event-input" style="display: none">input event fired</span>
+  <span id="event-change" style="display: none">change event fired</span>
+<script>
+  document.addEventListener('input', ()=>{
+    document.getElementById('event-input').style.display = 'block';
+  })
+  document.addEventListener('change', ()=>{
+    document.getElementById('event-change').style.display = 'block';
+  })
+</script>
 </body>
 </html>