gamja: components/{join,network}-form: Use onInput instead of onChange v1 SUPERSEDED

Juan Cruz Orioli: 1
 components/{join,network}-form: Use onInput instead of onChange

 2 files changed, 6 insertions(+), 6 deletions(-)

[PATCH gamja] components/{join,network}-form: Use onInput instead of onChange Export this patch

Closes: https://todo.sr.ht/~emersion/gamja/128
---
On Preact, onChange is not wired to the 'input' event, unlike React,
which I believe is necessary to prevent the text input value from being
lost during a re-render.

Simon Ser <contact@emersion.fr>

16 days ago

Oh, Good catch! That explains a lot. I now see it mentioned in the
docs [1].

Next

Let me know if you would rather have all uses of onChange revised instead.

Simon Ser <contact@emersion.fr>

16 days ago

If you have time, that would be ideal! If not, I can allocate some time
for it.

[1]: https://preactjs.com/guide/v10/differences-to-react/#use-oninput-instead-of-onchange

 components/join-form.js    | 6 +++---
 components/network-form.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/join-form.js b/components/join-form.js
index 4d16f38..3676891 100644
--- a/components/join-form.js
+++ b/components/join-form.js
@@ -8,7 +8,7 @@ export default class JoinForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.channel) {
@@ -16,7 +16,7 @@ export default class JoinForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -34,7 +34,7 @@ export default class JoinForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Channel:<br/>
 					<input type="text" name="channel" value=${this.state.channel} autofocus required/>
diff --git a/components/network-form.js b/components/network-form.js
index a8a2dd6..1610040 100644
--- a/components/network-form.js
+++ b/components/network-form.js
@@ -22,7 +22,7 @@ export default class NetworkForm extends Component {
 
 		this.prevParams = { ...defaultParams };
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.params) {
@@ -35,7 +35,7 @@ export default class NetworkForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -85,7 +85,7 @@ export default class NetworkForm extends Component {
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Hostname:<br/>
 					<input type="text" name="host" value=${this.state.host} autofocus required/>
-- 
2.39.0

builds.sr.ht <builds@sr.ht>

17 days ago

gamja/patches/.build.yml: SUCCESS in 44s

[components/{join,network}-form: Use onInput instead of onChange][0] from [Juan Cruz Orioli][1]

[0]: https://lists.sr.ht/~emersion/public-inbox/patches/38080
[1]: mailto:contact@juancruzorioli.com

✓ #919820 SUCCESS gamja/patches/.build.yml https://builds.sr.ht/~emersion/job/919820