Duplicate toolbar in SwiftUI

Question

I added toolbar to 2 text fields, but the toolbar shows up twice:

This is the code for my custom text field:

public struct SUIDecimalField: View {
  public var body: some View {
    TextField(placeholder, text: $value)
      .focused(focused)
      .textFieldStyle(.roundedBorder)
      .keyboardType(.decimalPad)
      .toolbar {
        ToolbarItemGroup(placement: .keyboard) {
          HStack {
            Button(LOC(.clearKeyboardButton)) {
              value = ""
            }
            Spacer()
            Button(LOC(.dismissKeyboardButton)) {
              focused.wrappedValue = false
            }
          }
        }
      }
    }
  }

As you can see i only added the toolbar to the text field. I have 2 text fields, and it showed up twice.

Looks like the toolbar is somehow shared between all text fields. I am wondering how do I resolve it? I really want to put the toolbar inside the text field implementation so that the logic is encapsulated.

This is a known thing. The only way around it is using UIKit instead — lorem ipsum
– lorem ipsum, Commented Feb 26, 2022 at 19:39
@loremipsum I am not using uikit for my project and i don't think it's possible to convert it to uikit now. — user626776
– user626776, Commented Feb 26, 2022 at 19:41
I meant i already have lots of infrastructure based on Swift UI's TextField, and it'd be great if we can do it with SwiftUI itself, not the UIViewRepresentable — user626776
– user626776, Commented Feb 26, 2022 at 22:20

pxlshpr · Accepted Answer · 2022-05-12 08:19:06Z

8

Try applying the .toolbar modifier on the Form itself and not on each individual TextField like so:

import SwiftUI

struct ContentView: View {
    
    @State private var value1 = ""
    @State private var value2 = ""
    @FocusState private var focused: Int?
    
    var body: some View {
        Form {
            MyTextField(value: $value1, tag: 1, focused: $focused)
                .focused($focused, equals: 1)
            MyTextField(value: $value2, tag: 2, focused: $focused)
                .focused($focused, equals: 2)
        }
        .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                HStack {
                    Button("Clear") {
                        switch focused {
                        case 1: value1 = ""
                        case 2: value2 = ""
                        default: return
                        }
                    }
                    Spacer()
                    Button("Done") {
                        focused = nil
                    }
                }
            }
        }
    }
}

struct MyTextField: View {
    
    @Binding var value: String
    var tag: Int
    var focused: FocusState<Int?>.Binding
    
    var body: some View {
        TextField("Test", text: $value)
            .textFieldStyle(.roundedBorder)
            .keyboardType(.decimalPad)
    }
}

answered May 12, 2022 at 8:19

pxlshpr

1,1018 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alionthego Over a year ago

that solved my issue with multiple TextFields in a list. I was adding the ToolBar to on particular TextField only and it worked for all TextFields but made the scroll jerky when a TextField other than the one I added the Toolbar to was active. Moving the ToolbarModifier to the List instead of the TextField solved the problem and no more jerky scroll. Thanks.

Stefan Rein · Accepted Answer · 2024-03-15 15:51:27Z

5

Here's a possible solution:

@FocusState var isFocused: Bool
...
TextField(text: $value)
    .focused($isFocused)
    .toolbar {
        if isFocused {
            ToolbarItem(placement: .keyboard) {
                HStack {
                    Spacer()
                    Button("Done") {
                        isFocused = false
                    }
                }
            }
        } else {
            EmptyView()
        }
    }

edited Mar 15, 2024 at 15:51

Stefan Rein

9,2324 gold badges44 silver badges40 bronze badges

answered Nov 26, 2023 at 15:39

planet-cheese

611 silver badge3 bronze badges

Comments

ChrisR · Accepted Answer · 2022-02-26 22:45:29Z

1

this is not ideal, but it might be a start:

struct ContentView: View {
    
    @State private var value1 = ""
    @State private var value2 = ""
    @FocusState private var focused: Int?
    
    var body: some View {
        Form {
            MyTextField(value: $value1, tag: 1, focused: $focused)
                .focused($focused, equals: 1)
            
            MyTextField(value: $value2, tag: 2, focused: $focused)
                .focused($focused, equals: 2)
        }
    }
}

struct MyTextField: View {
    
    @Binding var value: String
    var tag: Int
    var focused: FocusState<Int?>.Binding
    
    var body: some View {
        TextField("Test", text: $value)
            .textFieldStyle(.roundedBorder)
            .keyboardType(.decimalPad)
        
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    HStack {
                        if focused.wrappedValue == tag {
                            Button("Clear") {
                                value = ""
                            }
                            Spacer()
                            Button("Done") {
                                focused.wrappedValue = nil
                            }
                        }
                    }
                }
            }
    }
}

answered Feb 26, 2022 at 22:45

ChrisR

12.5k1 gold badge19 silver badges40 bronze badges

5 Comments

user626776 Over a year ago

I think if you put the if statement under HStack, there will be multiple HStack with empty views inside

user626776 Over a year ago

interestingly, if i put the if statement outside of HStack, the toolbar doesn't show up. I don't know why

user626776 Over a year ago

The extra empty HStacks is an issue. They take up spaces too

user626776 Over a year ago

So if you add 2 fields, the first field's toolbar will only occupy the left half of toolbar space, and the second field's toolbar will only occupy the right half of the toolbar space

ChrisR Over a year ago

you're absolutely right, this was the only way I could somehow get rid of the duplicates ... anyway this is a SwiftUI issue which hopefully will be resolved at some point.

Ali · Accepted Answer · 2024-12-09 21:01:33Z

Top voted answer works but it's also forces Done button on text fields where I don't need it. I have not found an API that hides the keyboard toolbar. I have used introspect library and got it working

content
.introspect(.textField, on: .iOS(.v16, .v17, .v18)) { textField in
    let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    let done = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: nil)

    done.action = #selector(UIResponder.resignFirstResponder)
    done.target = textField

    let toolbar = UIToolbar()
    toolbar.barStyle = .default
    toolbar.items = [flexSpace, done]
    toolbar.sizeToFit()

    textField.inputAccessoryView = toolbar
 }

Jalian · Accepted Answer · 2022-06-20 15:30:23Z

I have struggled with similar situation myself, and there is no clean way. What I would suggest in your case is

append a clear button (X) on the right side of the text field, this is very intuitive for the user
you do not need to rewrite your code into UIKit, but can use one useful line of code (wrapped into extension of View) as described here: https://www.hackingwithswift.com/quick-start/swiftui/how-to-dismiss-the-keyboard-for-a-textfield the advantage is, that it is generic and you do not need to determine which focus state to change.
add the toolbar to only one of the TextFields, then the "Dismiss" button will not be replicated in the toolbar and it will work correctly.

Not nice, not clean, but as SwiftUI as you can get and functional.

Collectives™ on Stack Overflow

Duplicate toolbar in SwiftUI

5 Answers 5

1 Comment

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related