Skip to content

Commit 3028e81

Browse files
committed
Added notes on first responder control
1 parent 690f876 commit 3028e81

File tree

1 file changed

+97
-2
lines changed

1 file changed

+97
-2
lines changed

README.md

+97-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ status.
4747

4848
```swift
4949
struct ExampleView: View {
50-
@State var email: String
51-
@State var isEditingEmail: Bool
50+
@State var email: String = ""
51+
@State var isEditingEmail: Bool = false
5252

5353
var body: some View {
5454
VStack {
@@ -212,6 +212,101 @@ public extension ResponsiveTextField.Configuration {
212212
}
213213
```
214214

215+
## First Responder Control
216+
217+
`ResponsiveTextField` uses the SwiftUI binding system to give programmatic
218+
control over the first responder status of the control. This is one of the
219+
major pieces of missing behaviour from the native `TextField` type.
220+
221+
The control is passed a `Binding<Bool>` on initialisation which allows two-way
222+
communication about the text field's responder state. When the user taps on
223+
the text field, it will become first responder unless it has been disabled.
224+
This will update the state that the binding was derived from to `true`.
225+
Similarly, if another control becomes first responder, the text field will
226+
resign it's first responder status and set the underlying state to `false`.
227+
228+
Update the external state will update the text field and will make it become
229+
or resign first responder. For example, on a screen with two text fields, you
230+
could make the first text field become first responder automatically, causing
231+
the keyboard to appear when the view is shown, by simply setting the default
232+
value of the state to `true`:
233+
234+
```swift
235+
struct ExampleView: View {
236+
@State var email: String = ""
237+
@State var password: String = ""
238+
@State var isEditingEmail: Bool = true
239+
@State var isEditingPassword: Bool = false
240+
241+
var body: some View {
242+
VStack {
243+
/// This field will become first responder automatically
244+
ResponsiveTextField(
245+
placeholder: "Email address",
246+
text: $email,
247+
isEditing: $isEditingEmail
248+
)
249+
ResponsiveTextField(
250+
placeholder: "Password",
251+
text: $password,
252+
isEditing: $isEditingPassword
253+
)
254+
}
255+
}
256+
}
257+
```
258+
259+
You could also trigger the field to become first responder after a short
260+
delay after appearing:
261+
262+
```swift
263+
VStack {
264+
ResponsiveTextField(
265+
placeholder: "Email address",
266+
text: $email,
267+
isEditing: $isEditingEmail
268+
)
269+
}
270+
.onAppear {
271+
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
272+
isEditingEmail = true
273+
}
274+
}
275+
```
276+
277+
You could also use the built-in keyboard handling closure to move from one
278+
field to the next when the keyboard return button is tapped:
279+
280+
```swift
281+
struct ExampleView: View {
282+
@State var email: String = ""
283+
@State var password: String = ""
284+
@State var isEditingEmail: Bool = true
285+
@State var isEditingPassword: Bool = false
286+
287+
var body: some View {
288+
VStack {
289+
/// Tapping return will make the password field first responder
290+
ResponsiveTextField(
291+
placeholder: "Email address",
292+
text: $email,
293+
isEditing: $isEditingEmail,
294+
configuration: .emailField,
295+
handleReturn: { isEditingPassword = true }
296+
)
297+
/// Tapping return will resign first responder and hide the keyboard
298+
ResponsiveTextField(
299+
placeholder: "Password",
300+
text: $password,
301+
isEditing: $isEditingPassword,
302+
configuration: .passwordField,
303+
handleReturn: { isEditingPassword = false }
304+
)
305+
}
306+
}
307+
}
308+
```
309+
215310
## Licence
216311

217312
This library is released under the Apache v2.0 license. See [LICENSE](LICENSE)

0 commit comments

Comments
 (0)