title: Bootstrap modal dialog text fields don't update after I programmatically change the values until the user types in the field
body: <p>I'm having the following problem: I have a list of items, any of which a user can click on to edit. At this time, a bootstrap modal dialog shows with fields for each of the editable values. I'm updating the values for the fields from an underlying Knockout viewmodel, so when the user edits an item on the modal dialog, they can see the field being modified in the background. So, the modifying currently works fine. However, when the dialog first opens, it doesn't have the values from the item the user selected; instead, it has the values that were loaded previously. But, when the user starts to edit a field, it instantly updates to what the value is supposed to be, and allows the user to continue editing the correct field. Not sure what's going on here.</p>
  
  <p>Here is my modal:</p>
  
  <pre><code>&lt;script id="myModal" type="text/html"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-bind="click: close" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 data-bind="html: header"&gt;&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label&gt;First Name&lt;/label&gt;
                      &lt;input type="text" data-bind="value: modal.firstName, valueUpdate: 'afterkeydown'" class="form-control" /&gt;
                      &lt;label&gt;Last Name&lt;/label&gt;
                      &lt;input type="text" data-bind="value: modal.lastName, valueUpdate: 'afterkeydown'" class="form-control" /&gt;
                      &lt;label&gt;Phone&lt;/label&gt;
                      &lt;input type="text" data-bind="value: modal.phone, valueUpdate: 'afterkeydown'" class="form-control" /&gt;
                      &lt;label&gt;Email&lt;/label&gt;
                      &lt;input type="text" data-bind="value: modal.email, valueUpdate: 'afterkeydown'" class="form-control" /&gt;
                  &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;a href="#" class="btn" data-bind="click: close, html: closeLabel"&gt;&lt;/a&gt;
              &lt;a href="#" class="btn btn-primary" data-bind="click: action, html: primaryLabel"&gt;&lt;/a&gt;
            &lt;/div&gt;
    &lt;/script&gt;
  
  
  &lt;!-- Create a modal via custom binding --&gt;
          &lt;div data-bind="bootstrapModal: modal" data-keyboard="false" data-backdrop="static"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the part where the list is populated via knockout:</p>
  
  <pre><code>&lt;ul data-bind="foreach: tasks"&gt;
      &lt;li&gt;
          &lt;div style="border:double"&gt;
              &lt;div&gt;
                  &lt;label data-bind="text: firstName"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;label data-bind="text: lastName"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;label data-bind="text: phone"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;label data-bind="text: email"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;button data-bind="click: editI.bind(this)"&gt;Edit&lt;/button&gt;                            
                  @*&lt;button data-bind="click: $parent.removeUser"&gt;Delete&lt;/button&gt;*@
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt; 
  &lt;/ul&gt;
  
  &lt;form @*data-bind="submit: addUser"*@&gt;
      &lt;button type="submit"&gt;Add User&lt;/button&gt;
  &lt;/form&gt;
  &lt;button @*data-bind="click: save"*@&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>Here is where I set the modal values, which works, when the knockout viewmodel is loaded:</p>
  
  <pre><code>viewModel.modal = {
      header: ko.observable("This is a modal"),
      firstName: ko.observable("a"),
      lastName: ko.observable("a"),
      phone: ko.observable("a"),
      email: ko.observable("a"),
      body: ko.observable("test body"),
      closeLabel: "Close",
      primaryLabel: "Do Something",
      show: ko.observable(false), /* Set to true to show initially */
      onClose: function () {
          viewModel.onModalClose();
      },
      onAction: function () {
          viewModel.onModalAction();
      }
  </code></pre>
  
  <p>Finally, here is the edit function that gets called when the modal is opened. This is where things go awry. Item elements are set to the modal viewmodel, but aren't shown in the modal until a user starts editing that item...then, bam, the item shows in the field.</p>
  
  <pre><code>    self.editI = function (item) {
          viewModel.modal.body = item.email;
          viewModel.modal.firstName = item.firstName;
          viewModel.modal.lastName = item.lastName;
          viewModel.modal.phone = item.phone;
          viewModel.modal.email = item.email;
  
          prevState = item;
  
          viewModel.modal.show(true);
  </code></pre>
  
  <p>Note: I've found a couple of SO posts similar to this one: 
  <a href="https://stackoverflow.com/questions/13177426/how-to-destroy-bootstrap-modal-window-completely">how to destroy bootstrap modal window completely?</a>
  They haven't really helped though.</p>