CODEWITHSUNDEEP
iosswiftswiftui
Finn Kliewer
Finn Kliewer

Reputation: 9

How to clear a text field when "return" is pressed on the on screen keyboard

I have a button that is supposed to add text from a TextField into a list, either when the button is pressed, or "return" is pressed on the on-screen keyboard, and then clear the TextField. When I press the button this all works flawlessly, however when I press "return" the item gets added onto the list but the TextField is never cleared. I do not understand why it does not get cleared, the same code is called when "return" is pressed as when the button is pressed.

TextField("Add Item", text: $newItem, onCommit: {
                    self.items.append(self.newItem)
                    ShoppingListData.saveItems(self.items)
                    self.newItem = ""
                })
                .padding(.horizontal, 10)
                .padding(.vertical, 6)
                .background(Color(.systemGray6))
                .cornerRadius(10)

                Button(action: {
                    self.items.append(self.newItem)
                    ShoppingListData.saveItems(self.items)
                    self.newItem = ""
                }) {
                    Image(systemName: "plus")
                }

As you can see both the button and the onCommit use the same code

                    self.items.append(self.newItem)
                    ShoppingListData.saveItems(self.items)
                    self.newItem = ""

However for some reason the self.newItem = "" only works when the button is pressed and not when "return" is pressed and onCommit is called.

I've looked up online how to clear text fields and as far as I am aware self.newItem = "" should be clearing the text field but it does not.

Upvotes: 0

Views: 1063

Answers (2)

Alamgir
Alamgir

Reputation: 51

---- In SwiftUI ----

We can use textField modifier 'onCommit', its action is set to clear the text by setting self.text to an empty string.

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("Enter text here", text: $text) {
             DispatchQueue.main.async {
                 self.text = ""
             }
        }
    }
}

---- In UIKit ----

You need implement the textFieldShouldReturn method, which is called when the "return" key is pressed on the on-screen keyboard. In this method, we clear the text field by setting its text property to an empty string.

class ViewController: UIViewController, UITextFieldDelegate {
    // Set the text field's delegate to self
    yourTextField.delegate = self

// UITextFieldDelegate method called when the "return" key is pressed
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Clear the text field
    textField.text = ""

// Hide the keyboard
      textField.resignFirstResponder()
      return true
   }
}

Upvotes: 1

Ahmed Ayoub
Ahmed Ayoub

Reputation: 17

You can add UIApplication.shared.endEditing() code in your Button:

Button(action: {
                self.items.append(self.newItem)
                ShoppingListData.saveItems(self.items)
                self.newItem = ""
               UIApplication.shared.endEditing() // Call to dismiss keyboard
            }) {
                Image(systemName: "plus")
            }

and add this extension:

// extension for keyboard to dismiss
extension UIApplication {
    func endEditing() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

I hope this will help you.

Upvotes: 0

Related Questions