Editable TextField in SwiftUI List

Question

UPDATE: 14 months later, there is this intriguing note in the AppKit release notes:

A TextField that you are editing inside a selected List row now has correct text foreground colors. (68545878)

Now when placing a TextField in a List, the TextField becomes focused on click the very first time it is selected, but subsequent editing attempts fail: the List row is selected but the TextField does not gain focus.

O/P:

In a beta6 SwiftUI macOS (not iOS) app, I need to have a List with editable text fields, but the TextFields in the list are not editable. It works fine if I swap out List for Form (or just VStack), but I need it working with a List. Is there some trick to tell the list to make the fields editable?

import SwiftUI

struct ContentView: View {
    @State var stringField: String = ""

    var body: some View {
        List { // works if this is VStack or Form
            Section(header: Text("Form Header"), footer: Text("Form Footer")) {
                TextField("Line 1", text: $stringField).environment(\.isEnabled, true)
                TextField("Line 2", text: $stringField)
                TextField("Line 3", text: $stringField)
                TextField("Line 4", text: $stringField)
                TextField("Line 5", text: $stringField)
            }
        }
    }
}

Answer 1

Bug Report

I updated the project to target a MacOS app and found the bug you are reporting. I've updated Apple with this feedback because it indeed does seem to be a bug (Welcome to Beta).

FB7174245 - SwiftUI Textfields embedded in a List are not editable when target is macOS

Update

So what's the point of all the focus on state and binding below? One variable should be bound to a single control. Here is a working example. I'll leave up the older answer as it carries the example forward with a full app saving and retrieving data to/from CoreData.

import SwiftUI

struct ContentView: View {
    @State var field1: String = ""
    @State var field2: String = ""
    @State var field3: String = ""
    @State var field4: String = ""
    @State var field5: String = ""

    var body: some View {
        List { // works if this is VStack or Form
            Section(header: Text("Form Header"), footer: Text("Form Footer")) {
                TextField("Line 1", text: $field1).environment(\.isEnabled, true)
                TextField("Line 2", text: $field2)
                TextField("Line 3", text: $field3)
                TextField("Line 4", text: $field4)
                TextField("Line 5", text: $field5)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

BTW - This works on Xcode Beta (11M392r) with MacOS Catalina - 10.15 Beta (19A546d).

Sample Project

Check out this sample that includes an editable Textfield that writes to CoreData, which I am building on Github.

Take a look at the difference between @State and @Binding so that you can manipulate data from outside of the content view. (60-sec video)

struct ContentView: View {
    // 1.
    @State var name: String = ""
    var body: some View {
        VStack {
            // 2.
            TextField(" Enter some text", text: $name)
                .border(Color.black)
            Text("Text entered:")
            // 3.
            Text("\(name)")
        }
        .padding()
        .font(.title)
    }
}

source

Check out the following answer for the appropriate use-case of @State (SO Answer)

Answer 2

The following code is only an experiment to understand the character of List in SwiftUI and show an alternative. What I understand from observing the output from various combinations is that, List View's style is structured in a way to override the default behaviors of underlying View to become Selectable. This means that TextField does absolutely different. TextField is an focusable element where we can type. This focusing variable is not wired in to List View to work together. Hence, List override default focusable. Hence it is not possible to create List with TextView. But if you need, next best option is ScrollView instead of List and do the styling explicitly. Check the following code and both ways.

import SwiftUI

struct ContentView: View {
    @State private var arr = ["1","2","3"]
    var body: some View {
        HStack {
            VStack {
                List {
                    ForEach(self.arr.indices, id:\.self) {
                        TextField("", text: self.$arr[$0])
                    }
                }
            }
            .frame(minWidth: 150, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
            VStack {
                ScrollView {
                    ForEach(self.arr.indices, id:\.self) {
                        TextField("", text: self.$arr[$0])
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding(2)
                    }
                }
                .padding(.leading, 5)
                .padding(3)
            }
            .background(Color(NSColor.alternatingContentBackgroundColors[0]))
            .frame(minWidth: 150, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
        }
    }
}

extension NSTextField {
    open override var focusRingType: NSFocusRingType {
        get { .none }
        set { }
    }
}

Answer 3

Does get focus—if you tap just right

Using Xcode 12.4 and SwiftUI 2 for a macOS app, I seemed to have the same problem: Could not make TextEdit work inside a List. After reading here, and experimenting some more, I realized that in my case the TextField does reliably get the focus, but only if you tap in just the right way. I think and hope this is not how it should be working, so I posted the question TextField inside a List in SwiftUI on macOS: Editing not working well, explaining the details of my observations.

In summary: Single-tap exactly on existing text does give focus (after a small, annoying, delay). Double-tap anywhere does not give focus. Single-tap anywhere in an empty field does give focus.

Answer 4

SwiftUI 2.0

You can use TextEditor instead of TextField in lists in order to get editable text fields.

TextEditor(text: $strings)
    .font(.body)
    .cornerRadius(5)
    .shadow(color: Color.black.opacity(0.18), radius: 0.8, y: 1)
    .frame(height: 20)

This way you will get a similar aspect between the TextEditor and TextField.

Answer 5

A TextField placed inside a SwiftUI List (with selection enabled) appears to have the proper editing behavior as of macOS 13.5.1. When you click on a selected row, the TextField becomes editable. Horizontal "scrolling" for long text that clips also works properly. These features did NOT work properly on macOS 12.6.8.

However, ContextMenu doesn't behave correctly. Right-clicking (e.g. two finger tap on a trackpad) on a selected TextField does not bring up the context menu attached to the TextField (or List), but instead it incorrectly makes the TextField editable and brings up the system text selection menu for the selected text inside the TextField (e.g. Lookup, Translate, Search, Cut, Copy, Paste, Share, etc.). Control-clicking on the TextField does not bring up any menu. Instead, if the TextField was selected, it puts it into editing mode. If a non-selected row/TextField was control-clicked, it selects that TextField instead of showing the ContextMenu. It appears List does not support something analogous to NSTableView's clickedRow of where it is separate from the selected row(s) and allows you to preserve row selection while bringing up a context menu for the clicked row.

It feels like the engineers working on SwiftUI don't have much experience with how macOS should behave.