TextFields inside a List lose focus after each character

Question

Created Sep ’24

Replies 1

Boosts 0

Participants 1

My problem: I tap in one of the TextFields defined below and try to type. After typing a single character, the cursor disappears from the TextField and I need to tap in the field again to enter the next character.

I have the following code:

@Observable
final class Species {
    . . .
    public var list: [String]
    . . .
}

struct SpeciesCapture: View {
    @State private var species = Species()
    @State var trainingList: [String] = []
    
    var body: some View {
        NavigationStack {
            VStack(alignment: .leading) {
                HStack {
                    Text("some text")
                    Spacer()
                    Button("Add") {
                        trainingList.append("")
                    }
                }
                
                List {
                    ForEach($trainingList, id: \.self) { $animal in
                        TextField("Animal", text: $animal)
                            .textCase(.lowercase)
                    }
                }
            }
            .onAppear {
                trainingList = species.list
                . . .
            }
            . . . // etc.
        }
    }
}

It appears that I am continually losing focus. How do I fix this problem?

Xcode 16.0 targeting iOS 18. The behavior appears in both Preview and the Simulator. (Haven't tried it on a physical device).

Boost

Answer 1

richard_aurbach OP

Sep ’24

To answer my own post — The problem is the ForEach function. Apparently you cannot use theid: \.self form with an editable row. I am guessing that editing the TextField affects the \.self ID and confuses the ForEach statement.

The solution is to take the list of strings and use it to build an internal list of Identifiable structs that contain the strings. Then undo the process after completing the edits. This is messy but it works.

0