[BUGFIX] Fix text input cursor behavior

[mmun]

People are using bound <input>s. For the most part everything works great.

<input type="checkbox"
       checked={{user.isCool}}
       oninput={{action 'saveCoolness' user}} >

<textarea value={{user.description}}
          oninput={{action 'saveDescription' user}} >

  actions: {
    saveCoolness(user, event) {
      user.set('isCool', event.target.checked);
      Ember.run.throttle(user, 'save', 500);
    },

    saveDescription(user, event) {
      user.set('description', event.target.value);
      Ember.run.throttle(user, 'save', 500);
    }
  }

But not everything is rainbows and butterflies. Text inputs have an annoying
wart. Whenever you update their value, the cursor is moved to the end of the
input. This becomes a problem when you are trying to edit text in the middle of
a text input. Curiously, this issue doesn't affect <textarea> (confirmed on
Firefox/Chrome/Safari).

Here's an ember-twiddle that show cases the
current state of affairs.

Why does this happen?

A little background first. When you edit a text input through the browser GUI the oninput
event is triggered. When you change the input element's value property, the oninput
event is not fired, but the cursor is set to the end of the text field.

Now let's say you write

<input value={{user.name}} oninput={{action 'updateName'}}>

and

actions: {
  updateName(event) {
    this.set('user.name', event.target.value);
  }
}

If you edit the text input the browser will internally update the value property on the
input element and then fire the oninput event. Our handler mutates the value of user.name.
This triggers the value={{user.name}} binding to update, or in other words calls

input.value = user.name

Proposed fix

In order to fix this we can avoid setting .value when we don't need to. This will skirt the issue
of resetting the cursor when value is mutated. Specifically, we add a guard to PropertyAttrMorph
so that we avoid calling input.value = newValue if the follow conditions are met:

• this.attrName === 'value'
• this.element.tagName === 'INPUT'
• this.element.value == newValue

Here is an ember-twiddle with the patch applied.
Note how editing the Name text input works correctly now. Even dead keys work just fine! (Try
entering Option-e + e in the text input. It should generate a "é" character.)

Trade-offs

Making this change has a small trade off. It alters DOM semantics so that, when the conditions
above are met, we treat the mutation as a no-op rather than a set-the-value-to-what-it-already-was.
We believe that this is a very small price to pay for a massive improvement in developer ergonomics.

[cibernox]

This makes me sooo happy. No more input components.

[stefanpenner]

Lgtm

[cibernox]

As a side note, even if you're probably aware, using native inputs is more than on order of magnitude faster and memory is at least 1/3 smaller.

[cibernox]

Quick benchmark (without this fix): https://benchmark-inputs.pagefrontapp.com/input-helper

Check console.debugs