3

In SwiftUI, TextField("", text: $input) has this automatic behavior, when you press done, the keyboard is dismissed. This is exactly what I wanted with the done button.

However, if you use TextField("", text: $input, axis: .vertical) the done button will become line change instead, and will no longer dismiss the keyboard.

I need scrollable TextField as TextField("", text: $input, axis: .vertical). At the same time, pressing done button to dismiss the keyboard instead of line change. Does anyone knows how to achieve it? Thank you!

enter image description here

2

3 Answers 3

3

I think you have to add one button above the keyboard which is called Tool bar button

Hope this will help

struct ContentView: View {
private enum Field: Int, CaseIterable {
    case username
}

@State private var username: String = ""

@FocusState private var focusedField: Field?

var body: some View {
    NavigationView {
            TextField("Username", text: $username)
                .focused($focusedField, equals: .username)
        .toolbar {
            ToolbarItem(placement: .keyboard) {
                Button("Done") {
                    focusedField = nil
                }
            }
        }
    }
}}
3

It appears .onSubmit doesn't get called either, so it definitely seems like a bug. E.g. this will never print.

TextField("", text: $text, axis: .vertical)
    .onSubmit {
        print("Test")
    }
    .submitLabel(.done)

I filed a feedback, but in the meantime this binding approach seems to work. It relies on monitoring the keypresses for a return and intercepting it. It's ok if you absolutely need it but you can sometimes notice a slight delay. Copying answer below.

struct ContentView: View {

    @State var message: String = ""
    @FocusState private var isFocused: Bool
    
    var body: some View {
        VStack {
            TextField("Placeholder",
                      text: Binding(
                        get: { message },
                        set:
                            { (newValue, _) in
                                if let _ = newValue.lastIndex(of: "\n") {
                                    isFocused = false
                                } else {
                                    message = newValue
                                }
                            }
                      ), axis: .vertical)
                .submitLabel(.done)
                .focused($isFocused)
        }
    }
}
1
  • the last char "\n" should be trimmed before dismissing the keyboard, so this works better ----> set: { (newValue, _) in if let _ = message.lastIndex(of: "\n") { message = String(newValue.dropLast()) focusedField = false } else { message = newValue } } Commented Oct 11, 2023 at 8:26
0
.onChange(of: text) {
    if text.last?.isNewline == .some(true) {
        text.removeLast()
        isFocused = false
    }
}

Is another option.

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 21 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.