Skip to content

Commit 5daa849

Browse files
committed
Expand focus example to show search
1 parent 854bd6b commit 5daa849

1 file changed

Lines changed: 15 additions & 1 deletion

File tree

src/content/reference/react/Fragment.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -526,9 +526,23 @@ function FormFields({ children }) {
526526
</>
527527
);
528528
}
529+
530+
// Even though the inputs are deeply nested,
531+
// focus() searches depth-first to find them.
532+
function App() {
533+
return (
534+
<FormFields>
535+
<fieldset>
536+
<legend>Shipping</legend>
537+
<label>Street: <input name="street" /></label>
538+
<label>City: <input name="city" /></label>
539+
</fieldset>
540+
</FormFields>
541+
);
542+
}
529543
```
530544
531-
`focus()` finds the first focusable element by searching depth-first through all nested children. `focusLast()` does the same in reverse. `blur()` removes focus if the currently focused element is within the Fragment.
545+
Calling `focusFirst()` focuses the `street` input—even though it is nested inside a `<fieldset>` and `<label>`. `focus()` searches depth-first through all nested children, not just direct children of the Fragment. `focusLast()` does the same in reverse, and `blur()` removes focus if the currently focused element is within the Fragment.
532546
533547
---
534548

0 commit comments

Comments
 (0)