How to clear text in custom UITextView when a send button is clicked in a SwiftUI Chat app? - uiview

Question

I have limited knowledge of UIKit. So I followed a tutorial on creating a chat room. Following the code. The only problem is that I can not reset the chat text after sending the message. The text message is getting reset. But it is not reflecting inside Custom UITextView called MessageField. I am using Xcode 12.3.
How can I clear UITextView's text when the send button action is executed?
MessageField.swift
import SwiftUI
struct MessageField: UIViewRepresentable {
#Binding var text: String
#Binding var height: CGFloat
var placeholder = "Message"
func makeCoordinator() -> Coordiator {
return MessageField.Coordiator(parent: self, placeholder: placeholder)
}
func makeUIView(context: Context) -> UITextView {
let view = UITextView()
view.isEditable = true
view.isScrollEnabled = true
view.text = placeholder
view.font = .systemFont(ofSize: 18)
view.textColor = .lightGray
view.backgroundColor = .clear
view.delegate = context.coordinator
return view
}
func updateUIView(_ uiView: UITextView, context: Context) {
DispatchQueue.main.async {
self.height = uiView.contentSize.height
}
}
class Coordiator: NSObject, UITextViewDelegate {
var parent: MessageField
var placeholder: String
init(parent: MessageField, placeholder: String) {
self.parent = parent
self.placeholder = placeholder
}
func textViewDidBeginEditing(_ textView: UITextView) {
if self.parent.text == "" {
textView.text = ""
textView.textColor = .label
}
}
func textViewDidEndEditing(_ textView: UITextView) {
if self.parent.text == "" {
textView.text = placeholder
textView.textColor = .lightGray
}
}
func textViewDidChange(_ textView: UITextView) {
DispatchQueue.main.async {
self.parent.height = textView.contentSize.height
self.parent.text = textView.text
}
}
}
}
ChatField.swift
import SwiftUI
struct ChatField: View {
#Binding var text: String
#State var height: CGFloat = 0
var sendText: () -> ()
var body: some View {
HStack(alignment: .bottom) {
MessageField(text: self.$text, height: self.$height)
.frame(height: self.height < 150 ? self.height : 150)
.padding(.horizontal)
.background(Color(.systemBackground))
.cornerRadius(10)
Button(action: {
self.sendText()
self.text = ""
print("Message sent")
}, label: {
Image(systemName: "paperplane.fill")
.resizable()
.scaledToFit()
.padding(12)
.frame(height: 38, alignment: .center)
.foregroundColor(.foregroundLabel)
})
.background(Color(.systemBackground))
.clipShape(RoundedRectangle(cornerRadius: 10))
}
.padding(.horizontal)
.padding(.vertical, 5)
}
}
ChatRoom.swift
import SwiftUI
struct ChatRoom: View {
#State var text = ""
#State var height: CGFloat = 0
var body: some View {
VStack(spacing: 0) {
HStack {
Text("Chat Room")
.font(.title)
.fontWeight(.bold)
Spacer()
}
.padding()
.background(Color(.systemBackground))
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .leading) {
ForEach(0 ..< 60) { item in
Text("Hello \(item+1)")
}
}
.padding(.horizontal)
.frame(maxWidth: .infinity, alignment: .leading)
}
ChatField(text: $text, height: height) {
print("Sending following text:")
print(self.text)
}
.background(Color(.systemBackground).edgesIgnoringSafeArea(.bottom))
}
.background(Color(.systemGroupedBackground))
.onTapGesture {
UIApplication.shared.windows.first?.rootViewController?.view.endEditing(true)
}
}
}

Answer 1

The UIViewRepresentable.updateUIView is called when binding is modified, so you need to apply externally modified data (text in your case) in this function, like
func updateUIView(_ uiView: UITextView, context: Context) {
if self.text != "" { uiView.text = self.text }
DispatchQueue.main.async {
self.height = uiView.contentSize.height
}
}

Answer 2

The logic used in the tutorial have nice UI. But practically not usable. The UI text was updated from textViewDidBeginEditing and textViewDidEndEditing directly. This logic created so many problems while creating complete chat system. After lots of trail and error to understand the working and debugging, I found a perfect straight forward solution.
Solution:
Use a isEditing boolean to track changes and update UI only inside updateUIView method.
That fixed everything. Following is the fixed code.
MessageField.swift
import SwiftUI
struct MessageField: UIViewRepresentable {
#Binding var text: String
#Binding var height: CGFloat
var placeholder: String
#State var isEditing: Bool = false
func makeCoordinator() -> Coordiator {
return MessageField.Coordiator(parent: self)
}
func makeUIView(context: Context) -> UITextView {
let view = UITextView()
view.isEditable = true
view.isScrollEnabled = true
view.text = placeholder
view.font = .systemFont(ofSize: 18)
view.textColor = .lightGray
view.backgroundColor = .clear
view.delegate = context.coordinator
return view
}
func updateUIView(_ textView: UITextView, context: Context) {
if self.text == "" {
textView.text = self.isEditing ? "" : self.placeholder
textView.textColor = self.isEditing ? .label : .lightGray
}
DispatchQueue.main.async {
self.height = textView.contentSize.height
}
}
class Coordiator: NSObject, UITextViewDelegate {
var parent: MessageField
init(parent: MessageField) {
self.parent = parent
}
func textViewDidBeginEditing(_ textView: UITextView) {
DispatchQueue.main.async {
self.parent.isEditing = true
}
}
func textViewDidEndEditing(_ textView: UITextView) {
DispatchQueue.main.async {
self.parent.isEditing = false
}
}
func textViewDidChange(_ textView: UITextView) {
DispatchQueue.main.async {
self.parent.height = textView.contentSize.height
self.parent.text = textView.text
}
}
}
}