-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path@spectrum-web-components+search+0.35.0.patch
73 lines (73 loc) · 2.57 KB
/
@spectrum-web-components+search+0.35.0.patch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
diff --git a/node_modules/@spectrum-web-components/search/src/Search.dev.js b/node_modules/@spectrum-web-components/search/src/Search.dev.js
index 060bec9..a867393 100644
--- a/node_modules/@spectrum-web-components/search/src/Search.dev.js
+++ b/node_modules/@spectrum-web-components/search/src/Search.dev.js
@@ -29,6 +29,12 @@ export class Search extends Textfield {
this.action = "";
this.label = "Search";
this.placeholder = "Search";
+ this._formEventHandlers = {
+ submit: this.handleSubmit.bind(this),
+ reset: this.reset.bind(this),
+ keydown: this.handleKeydown.bind(this)
+ };
+ this._firstUpdateAfterConnected = false;
}
static get styles() {
return [...super.styles, searchStyles];
@@ -69,12 +75,10 @@ export class Search extends Textfield {
renderField() {
return html`
<form
+ data-test-id="patched"
action=${this.action}
id="form"
method=${ifDefined(this.method)}
- @submit=${this.handleSubmit}
- @reset=${this.reset}
- @keydown=${this.handleKeydown}
>
<sp-icon-magnify
class="icon magnifier icon-workflow icon-search"
@@ -97,6 +101,41 @@ export class Search extends Textfield {
super.firstUpdated(changedProperties);
this.inputElement.setAttribute("type", "search");
}
+
+ firstUpdateAfterConnected() {
+ super.firstUpdateAfterConnected();
+
+ this.formAbortController = new AbortController();
+ const { signal } = this.formAbortController;
+ this.form.addEventListener("submit", this._formEventHandlers["submit"], { signal });
+ this.form.addEventListener("reset", this._formEventHandlers["reset"], { signal });
+ this.form.addEventListener("keydown", this._formEventHandlers["keydown"], { signal });
+ }
+
+ updated(changes) {
+ super.updated(changes);
+ // Adding this here instead of firstUpdated because we want to make sure
+ // this is called again on the first update after a previous disconnect
+ // since firstUpdated is called only once
+ if (this._firstUpdateAfterConnected) {
+ this._firstUpdateAfterConnected = false;
+ this.firstUpdateAfterConnected();
+ }
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this._firstUpdateAfterConnected = true;
+ this.requestUpdate();
+ }
+
+ disconnectedCallback() {
+ // Cleanup all event listeners
+ this.formAbortController?.abort();
+ super.disconnectedCallback();
+ }
+
willUpdate() {
this.multiline = false;
}