inputAccessoryView is hiding with delay

29 Views Asked by At

I'm trying to toggle inputAccessoryView based on the input type. inputAccessoryView displays correctly when I keep the suggestion bar on. When I turn off the suggestions bar for one input field, inputAccessoryView disappears with a small, visible delay. How do I turn inputAccessoryView off before the suggestion bar reappears to remove this blinking?

Screen Recording

struct CustomInputTextField: UIViewRepresentable {
    typealias UIViewType = UITextField
    
    @Binding var text: String
    var isSuggestions: Bool
    
    let textField = UITextField(frame: CGRect(x:0, y:0, width: 100, height: 32))
    let inputView = UIInputView(frame: CGRect(x: 0, y: 0, width: 0, height: 40), inputViewStyle: .keyboard)

    func makeUIView(context: UIViewRepresentableContext<CustomInputTextField>) -> UITextField {
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomInputTextField>) {
        self.textField.text = text
        inputView.backgroundColor = .blue // for demo only
        
        if isSuggestions {
            textField.spellCheckingType = .no
            textField.autocorrectionType = .no
            textField.inputAccessoryView = inputView
        }
    }
    
    func makeCoordinator() -> CustomInputTextField.Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: CustomInputTextField

        init(parent: CustomInputTextField) {
            self.parent = parent
        }
    }
}
struct CustomInput: View {
    @State private var firstInputValue = ""
    @State private var secondInputValue = ""
    
    var body: some View {
        ScrollView {
            CustomInputTextField(text: $firstInputValue, isSuggestions: false)
                .frame(maxHeight: 44)
                .border(.yellow)
            
            CustomInputTextField(text: $secondInputValue, isSuggestions: true)
                .frame(maxHeight: 44)
                .border(.yellow)
        }
    }
}

0

There are 0 best solutions below