1

I have the following input element on my page:

<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text">

I have a Twitter Flight event listener on this element that looks like this:

this.on('keyup', {
  inputsSelector: this.updateViewInputs
});

Which triggers this method:

this.updateViewInputs = function(ev) {
  var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
  // Remove field is user is trying to delete it
  if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
    $(ev.target.parentNode).remove();
  }
  // Add another field dynamically
  if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) {
    this.select('inputsContainer').append(InputTemplate());
  }
  // Render fields
  that.trigger('uiUpdateInputs', {
    inputs: that.collectInputs()
  });
}

And finally triggers uiUpdateInputs:

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 }));
}

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.

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.

I have tried several approaches to fix this problem but none have worked, they include:

  • Using a setTimeout to delay the code run on the keyup event
  • Using Selection to try to disable the selection of the text using collapseToEnd.
  • Using click,focus,blur events to try to remove the selection from the entered text
  • Triggering a right arrow key event to try to simply move the cursor forward so they user does not delete the selected text
  • Using setInterval to routinely remove selections made by the window

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!

Maxwell Elliott
  • 13
  • 5
  • can you create a testcase? You can use this boilerplate http://jsbin.com/uGiDeLuH/1/edit and provide a detailed description of what component is supposed to do? – G.G. Jan 23 '14 at 12:22
  • That site does not seem to support [Twitter Flight](http://twitter.github.io/flight/). Do you know of a site that does? – Maxwell Elliott Jan 27 '14 at 02:43
  • I created a testcase boilerplate that uses the Standalone version of flight. `Test` is an empty component that you can fill up with the meat ;) – G.G. Jan 27 '14 at 14:00

1 Answers1

0

This seems to be an issue with certain versions of Safari. When listening for the keyup function in javascript it will automatically select all of the text in the box and subsequently delete it all when the next key is typed. To prevent this from happening call preventDefault on the event object that is passed to the keyup function.

this.on('keyup', function(e) {
  e.preventDefault()
});
zarazan
  • 1,164
  • 10
  • 13
  • I have also seen this happen in current chrome even on google.com. I will start typing into the search field and the text is selected and deleted instantly. I am accepting your answer becuase I have no other ideas why this is happening and I actually changed my code to prevent this from happening altogether so it is no longer an issue. I do not think that this is a JS issue or flight issue, it is a browser issue. – Maxwell Elliott Apr 20 '14 at 23:47