When adding multiple TextFields only last will show keyboard

Question

Created Aug ’19

Replies 1

Boosts 0

Views 2.6k

Participants 1

I have a 3 TextFields in SwiftUI. one on top and two side by side underneath that.

VStack{
 //TF1 
 TextField("Duty", text: $dutyNumber) 
     .textFieldStyle(RoundedBorderTextFieldStyle()) 
     .padding([.leading], 50) 
     .multilineTextAlignment(.center) 
     .keyboardType(.numberPad)  
   HStack{ 
     //TF2 
     TextField("Start time", text: $dutyStartTime) 
          .textFieldStyle(RoundedBorderTextFieldStyle()) 
          .padding([.leading], 50) .multilineTextAlignment(.center) 
          .keyboardType(.numberPad) 

     //TF3
      TextField("Finish time", text: $dutyFinishTime) 
          .textFieldStyle(RoundedBorderTextFieldStyle()) 
          .padding([.leading], 50) 
          .multilineTextAlignment(.center) 
          .keyboardType(.numberPad) 
      } 
}

However only the last textfield TF3 is interactive. Cannot select the first two TF1 & TF2. Can Tab into them with keyboard but cannot select them with a finger tap. If I change the order from TF1, TF2, TF3 to TF1, TF3, TF2 for example. Then TF2 is now interactive but TF1 & TF3 are not. Is this a bug with adding multiple TextFields in SwiftUI or am I missing something obvious?

Answered by RyanTCB in 375819022

Ok after going line by line the fix was to remove the cornerRadius I has set on the VStack. Didn't show that modifier in original post as I ddint think it was important. However posting here with full updated code.

VStack{
//TF1
  TextField("Duty", text: $dutyNumber)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)

  HStack{
//TF2
  TextField("Start time", text: $dutyStartTime)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)
//TF3 
  TextField("Finish time", text: $dutyFinishTime)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)

  }
  }//.cornerRadius(4)

Boost

Answer 1

RyanTCB OP

Aug ’19

Accepted Answer

Ok after going line by line the fix was to remove the cornerRadius I has set on the VStack. Didn't show that modifier in original post as I ddint think it was important. However posting here with full updated code.

VStack{
//TF1
  TextField("Duty", text: $dutyNumber)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)

  HStack{
//TF2
  TextField("Start time", text: $dutyStartTime)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)
//TF3 
  TextField("Finish time", text: $dutyFinishTime)
  .textFieldStyle(RoundedBorderTextFieldStyle())
  .padding([.leading], 50)
  .multilineTextAlignment(.center)
  .keyboardType(.numberPad)

  }
  }//.cornerRadius(4)

0