How to move to the next TextField SwiftUI?

SwiftUI: Fixing keyboard issues, while creating forms [iOS 14- XCode 12]

UIKit’s UITextField using UIViewRepresentable:

1. on textFieldShouldReturn set next TextField focus true.
2. if textFieldShouldReturn is on last TextField dismiss the keyboard
3. on textFieldDidBeginEditing(user tap of TextField) set all other focus to false and enable focus for current TextField
///IN Main View 
@State var fieldFocus: [Bool] = Array(repeating: false, count: 7)
///In Form text field:
var focusable: Binding<[Bool]>? = nil
func updateUIView(_ uiView: UITextField, context: Context) {
uiView.text = text
if let focusable = focusable?.wrappedValue {
if focusable[uiView.tag] { ///set focused
uiView.becomeFirstResponder()
} else { ///remove keyboard
uiView.resignFirstResponder()
}
}
}
//
func textFieldDidBeginEditing(_ textField: UITextField) {
self.textField = textField
guard let textFieldCount =
formTextField.focusable?.wrappedValue.count else { return }
var focusable: [Bool] = Array(repeating: false, count:
textFieldCount) //remove focus from all text field
focusable[textField.tag] = true ///mark current textField focused
formTextField.focusable?.wrappedValue = focusable
}
//
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
guard var focusable = formTextField.focusable?.wrappedValue else {
textField.resignFirstResponder()
return true
}
if (textField.tag + 1) != focusable.count { ///move focus to next text field if exist
focusable[textField.tag + 1] = true
}
focusable[textField.tag] = false ///remove focus from current text field
formTextField.focusable?.wrappedValue = focusable
return true
}
//
if
keyboardType == .numberPad { ///keyboard does not have next so add next button in the toolbar
var items = [UIBarButtonItem]()
let spacer = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let toolbar: UIToolbar = UIToolbar()
toolbar.sizeToFit()
let doneButton = UIBarButtonItem(title: "Next", style: .plain, target: context.coordinator, action: #selector(Coordinator.showNextTextField))
items.append(contentsOf: [spacer, doneButton])
toolbar.setItems(items, animated: false)
textField.inputAccessoryView = toolbar
}
//Coordinator.showNextTextField///work around for number pad
@objc func showNextTextField() {
if let textField = self.textField {
_ = textFieldShouldReturn(textField)
}
}
import Introspect //add Introspect in your project///inspect scrollview and enable interactive dismissal .introspectScrollView { (scrollView) in
scrollView.keyboardDismissMode = .interactive
}
if user have dismiss the keyboard. We need to reset all focus to false. func textFieldShouldReturn(_ textField: UITextField) -> Bool {
hasEndedViaReturn = true
///other code
}
///
func textFieldDidEndEditing(_ textField: UITextField) {
if hasEndedViaReturn == false {///user dismisses keyboard
guard let textFieldCount = formTextField.focusable?.wrappedValue.count else { return }
///reset all text field, so that makeUIView cannot trigger keyboard
formTextField.focusable?.wrappedValue = Array(repeating: false, count: textFieldCount)
} else {
hasEndedViaReturn = false
}
}

iOS Developer | Swift | Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store