title: Safari issue with text inputs, text is selected as user enters it causing text to be lost
body: <p>I have the following input element on my page:</p>
  
  <pre><code>&lt;input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text"&gt;
  </code></pre>
  
  <p>I have a Twitter Flight event listener on this element that looks like this:</p>
  
  <pre><code>this.on('keyup', {
    inputsSelector: this.updateViewInputs
  });
  </code></pre>
  
  <p>Which triggers this method:</p>
  
  <pre><code>this.updateViewInputs = function(ev) {
    var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
    // Remove field is user is trying to delete it
    if (isDeletionKeycode &amp;&amp; this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
      $(ev.target.parentNode).remove();
    }
    // Add another field dynamically
    if (this.select('lastInputsSelector')[0] &amp;&amp; (ev.target == this.select('lastInputSelector')[0]) &amp;&amp; !isDeletionKeycode) {
      this.select('inputsContainer').append(InputTemplate());
    }
    // Render fields
    that.trigger('uiUpdateInputs', {
      inputs: that.collectInputs()
    });
  }
  </code></pre>
  
  <p>And finally triggers uiUpdateInputs:</p>
  
  <pre><code>this.after('initialize', function() {
    this.on(document, 'uiUpdateInputs', this.updateInputs)
  });
  
  this.updateInputs = function(ev, data) {
    // Render all inputs provided by user
    this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs }));
  }
  </code></pre>
  
  <p>All of this functionality works as expected on Chrome and Firefox. Users can type into the input and see the page change in 'real time'. Users also get additional fields that they can enter text into and see the page change. </p>
  
  <p>The issue in question arises when using Safari, as a user enters text into the described input field the text in the input field becomes highlighted (selected) and when they enter the next character all the content is replaced with that single character.  This results in the user not being able to enter more than 1 or 2 characters before having them all replaced by the next entered character.</p>
  
  <p>I have tried several approaches to fix this problem but none have worked, they include:</p>
  
  <ul>
  <li>Using a setTimeout to delay the code run on the keyup event</li>
  <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&amp;redirectslug=DOM%2FSelection" rel="nofollow">Selection</a> to try to disable the selection of the text using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection.collapseToEnd?redirectlocale=en-US&amp;redirectslug=Web%2FAPI%2FSelection%2FcollapseToEnd" rel="nofollow">collapseToEnd</a>.</li>
  <li>Using click,focus,blur events to try to remove the selection from the entered text</li>
  <li>Triggering a right arrow key event to try to simply move the cursor forward so they user does not delete the selected text</li>
  <li>Using setInterval to routinely remove selections made by the window</li>
  </ul>
  
  <p>I am very confused why this is happening and I am wondering if this is a bug in webkit with Flight.  I see no issue with the Firefox or Chrome versions of this page.  Thanks for any help!</p>