From 83022b7b37dedf7d4152d39ed362eee957995635 Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Tue, 27 Feb 2024 19:25:16 -0600
Subject: [PATCH 1/3] docs: Reverse recommendation for controlled inputs
---
content/en/guide/v10/forms.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/en/guide/v10/forms.md b/content/en/guide/v10/forms.md
index e15cf9f4b..eac1ae49d 100755
--- a/content/en/guide/v10/forms.md
+++ b/content/en/guide/v10/forms.md
@@ -29,7 +29,7 @@ A framework like Preact in contrast generally has a unidirectional data flow. Th
;
```
-Generally, you should try to use _Controlled_ Components at all times. However, when building standalone Components or wrapping third-party UI libraries, it can still be useful to simply use your component as a mount point for non-preact functionality. In these cases, "Uncontrolled" Components are nicely suited to the task.
+Generally, you should try to use _Uncontrolled_ Components whenever possible. The DOM is fully capable of handling ``'s state. However, there are situations in which you may need to have tighter control over the input value, in which case, "Controlled" Components can be used.
> One gotcha to note here is that setting the value to `undefined` or `null` will essentially become uncontrolled.
From 7aa5750b1eab4656b7a860991bddc3329cd0cbee Mon Sep 17 00:00:00 2001
From: Ryan Christian
Date: Wed, 3 Jul 2024 17:05:58 -0500
Subject: [PATCH 2/3] docs: Update note on controlled components w/ example
---
content/en/guide/v10/forms.md | 41 +++++++++++++++++++++++++++++++++--
1 file changed, 39 insertions(+), 2 deletions(-)
diff --git a/content/en/guide/v10/forms.md b/content/en/guide/v10/forms.md
index eac1ae49d..1bdf18b4b 100755
--- a/content/en/guide/v10/forms.md
+++ b/content/en/guide/v10/forms.md
@@ -29,10 +29,47 @@ A framework like Preact in contrast generally has a unidirectional data flow. Th
;
```
-Generally, you should try to use _Uncontrolled_ Components whenever possible. The DOM is fully capable of handling ``'s state. However, there are situations in which you may need to have tighter control over the input value, in which case, "Controlled" Components can be used.
-
> One gotcha to note here is that setting the value to `undefined` or `null` will essentially become uncontrolled.
+Generally, you should try to use _Uncontrolled_ Components whenever possible, the DOM is fully capable of handling ``'s state. However, there are situations in which you might need to exert tighter control over the input value, in which case, _Controlled_ Components can be used.
+
+To use controlled components in Preact, you will need to use [`refs`](/guide/v10/refs) to bridge the inherent gap between the DOM state and VDOM/Preact's state. Here's an example of how you might use a controlled component to limit the number of characters in an input field:
+
+```jsx
+// --repl
+import { render } from "preact";
+import { useState, useRef } from "preact/hooks";
+// --repl-before
+const Input = () => {
+ const [value, setValue] = useState('')
+ const inputRef = useRef()
+
+ const onInput = (e) => {
+ if (e.currentTarget.value.length <= 3) {
+ setValue(e.currentTarget.value)
+ } else {
+ const start = inputRef.current.selectionStart
+ const end = inputRef.current.selectionEnd
+ const diffLength = Math.abs(e.currentTarget.value.length - value.length)
+ inputRef.current.value = value
+ // Restore selection
+ inputRef.current.setSelectionRange(start - diffLength, end - diffLength)
+ }
+ }
+
+ return (
+ <>
+
+
+
+ );
+}
+// --repl-after
+render(, document.getElementById("app"));
+```
+
+> For more information on controlled components in Preact, see [Controlled Inputs](https://www.jovidecroock.com/blog/controlled-inputs) by Jovi De Croock.
+
## Creating A Simple Form
Let's create a simple form to submit todo items. For this we create a `