title: SwiftUI: TextBox text field not showing bound value until clicked
body: <p>I am trying to create a view where a user can edit an item inside of a list.
  The list is displayed using a <code>ForEach</code> loop from a bound list variable, where each item is wrapped in a <code>NavigationLink</code> to a <code>View</code> that can be used to edit the given item.</p>
  <p>The first issue I ran into was that the edit view was binding directly to the element in the list, meaning that when I edited it, it forced a reload of the previous list <code>View</code> and threw you out of the edit view after each character typed.
  To get over this I though that I could duplicate the data inside of the bound variable, set this as a new <code>@State</code> variable, which would hold the updated information the user enters, and then once they are finished, update the bound variable in one go.</p>
  <p>This is working for me, bar one small issue, which is that the variable in the <code>TextField</code> does not reflect the actual information of the bound variable, until you tap it, then it updates with the right value. Is there something I can do so that I do not have to tap for the correct value to show up? It seems odd behaviour to me, because I am also using a <code>ColorPicker</code> and this always has the correct value.</p>
  <pre><code>class AppData: ObservableObject {
      @Published var things: [Thing] = [
          Thing(name: &quot;1&quot;, color: .red),
          Thing(name: &quot;2&quot;, color: .blue)
      ]
  }
  
  @main
  struct ThingApp: App {
      @ObservedObject private var appData = AppData()
      
      var body: some Scene {
          WindowGroup {
              ViewOne(things: $appData.things)
          }
      }
  }
  
  
  struct ViewOne: View {
      @Binding var things: [Thing]
      
      var body: some View {
          NavigationView {
              ViewTwo(things: $things)
          }
      }
  }
  
  struct ViewTwo: View {
      @Binding var things: [Thing]
  
      var body: some View {
          NavigationLink(destination: ThingListView(things: $things)) {
              Image(systemName: &quot;list.bullet&quot;)
                  .font(.system(size: 20))
          }
      }
  }
  
  struct ThingListView: View {
      @Binding var things: [Thing]
      
      var body: some View {
          ScrollView {
              VStack {
                  ForEach($things) { $thing in
                      NavigationLink(destination: ThingEditView(thingData: $thing.data)) {
                          Text(thing.name)
                      }
                  }
              }
          }
      }
  }
  
  struct ThingEditView: View {
      @Binding var thingData: Thing.Data
      @State private var newData: Thing.Data = Thing.Data()
      
      var body: some View {
          List {
              Section(header: Text(&quot;Details&quot;)) {
                  TextField(&quot;Name&quot;, text: $newData.name)
                  ColorPicker(&quot;Color&quot;, selection: $newData.color)
              }
          }
          .onAppear {
              newData.name = thingData.name
              newData.color = thingData.color
          }
          .onDisappear{
              thingData = newData
          }
      }
  }
  
  struct Thing: Identifiable {
      let id: UUID
      var name: String
      var color: Color
      
      struct Data {
          var name: String = &quot;&quot;
          var color: Color = .green
      }
      
      var data: Data {
          get { return Data(name: self.name, color: self.color)}
          set {
              name = newValue.name
              color = newValue.color
          }
      }
      
      internal init (data: Data) {
          self.id = UUID()
          self.name = data.name
          self.color = data.color
      }
      
      internal init (
          id: UUID = UUID(),
          name: String,
          color: Color
      ) {
          self.id = id
          self.name = name
          self.color = color
      }
  }
  </code></pre>