My TextField in Swift UI is Unresponsive to taps and clicks, text cannot be input, is there an issue with the code?

Question

Hi I'm an intermediate level engineer with swift and swift UI.

Currently, I am having problems with the TextField(), it is unresponsive to taps and clicks, and hence the keyboard does not show up,

However, it does show up when it is one of two main elements within a VStack, but anymore than that and it does not work,

Is there an issue with the code? and can anyone find a fix or a work around for this?

Thanks, Miles

{

    @State var textField = ""

    var body: some View {

        returnJoinModalContent()

    }

    func returnJoinModalContent() -> some View{

        let accentColor = Color.blue

        return VStack(alignment: .center){
            HStack{
                Text("Join Game")
                    .bold()
                    .font(.largeTitle)
                    .padding()
                Spacer()
                Button(action:{
                    //self.hideModal()
                }){
                Image(systemName: "xmark.circle.fill")
                    .resizable()
                    .frame(width: 50,height: 50)
                    .foregroundColor(accentColor)
                    .padding()
                }
            }
            .padding(.bottom,170)

            VStack(alignment: .leading){
                TextField("Enter Game Code",text: self.$textField)
                    .font(.largeTitle)

                Rectangle()
                    .frame(height: 6)
                    .foregroundColor(accentColor)
            }
            .padding()
            HStack{
                Button(action:{
                    //self.joinGame()
                }){
                    ZStack{
                RoundedRectangle(cornerRadius: 90)
                    .frame(width: 200,height: 70)
                    .foregroundColor(accentColor)
                Text("Ready!")
                    .bold()
                    .font(.title)
                    .foregroundColor(Color.white)
                    }
                }
            }
            .padding(.vertical,20)
            HStack{
                Image(systemName: "info.circle")
                    .resizable()
                    .frame(width:60,height:60)
                    .foregroundColor(accentColor)

                Text("Ask your host for the game code, it can be found at the bottom of the player lobby")
                .padding()
                Spacer()

            }
            .padding(.top,60)
            .padding(.horizontal,20)

            Spacer()
        }
        .padding()
    }




}

FIX?: increasing the frame of the textfield slightly makes fixes the issue for now, however i'd still like to know if there was a concrete reason for the error above — MilesB, Apr 23 '20 at 11:25

score 2 · Answer 1 · answered Apr 22 '20 at 22:09

2

This seems to be one of those things in swiftUI that is difficult to track down. I found the problem is your ready button. More specifically the label being a ZStack with a colored rounded rectangle as the background. If you replace your button's label with the following your text field should be selectable.

Text("Ready!")
.bold()
.font(.title)
.foregroundColor(Color.white)
.frame(width: 200,height: 70)
.background(accentColor)
.mask(RoundedRectangle(cornerRadius: 90))

answered Apr 22 '20 at 22:09

Mab.init

166
3

Problem Solved!! Do you know why that prevented the textfield from being recognised properly? – MilesB Apr 23 '20 at 15:22
No, I don't. It seems to just be a weird bug. – Mab.init Apr 24 '20 at 12:54

score 0 · Answer 2 · answered Sep 09 '21 at 15:01

0

I've found that overlay on the TextField or the container of TextField might cause it to be unresponsive

you should remove it and replace it with ZStack

answered Sep 09 '21 at 15:01

Mostfa Essam

745
8
11

My TextField in Swift UI is Unresponsive to taps and clicks, text cannot be input, is there an issue with the code?

2 Answers2