<p dir="auto">This appears to have been introduced in a new Chrome version, but I can't find any reference to where.</p>
<p dir="auto">Affected/Tested Browsers (OS X):</p>
<ul dir="auto">
<li>Chrome 51.0.2704.106 (64-bit)</li>
<li>Opera 39.0.2256.15</li>
</ul>
<p dir="auto">Unaffected Browsers:</p>
<ul dir="auto">
<li>Safari 9.1</li>
<li>Firefox 49</li>
</ul>
<p dir="auto">Backspacing in an input element with <code class="notranslate">value</code> or <code class="notranslate">defaultValue</code> set causes some very odd behavior. Once a decimal point is gone, it can't easily be re-added.</p>
<p dir="auto">Example:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1197375/16786390/1d722fd4-485a-11e6-8969-780d4e4e9752.gif"><img src="https://cloud.githubusercontent.com/assets/1197375/16786390/1d722fd4-485a-11e6-8969-780d4e4e9752.gif" alt="react-input-bug" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">In this example, I simply backspaced twice. On the second backspace, when I expect <code class="notranslate">3.</code> to be showing, the input instead reads <code class="notranslate">3</code> and the cursor has moved to the beginning. The next two jumps are my attempts to add another decimal point.</p>
<p dir="auto">Fiddle: <a href="https://jsfiddle.net/kmqz6kw8/" rel="nofollow">https://jsfiddle.net/kmqz6kw8/</a></p>
<p dir="auto">Tested with React 15.2.</p>
<p dir="auto">Notes: This only occurs when <code class="notranslate">value</code> or <code class="notranslate">defaultValue</code> is set. If neither is set, the input behaves properly. We are currently working around this issue by (unfortunately) setting the input value on <code class="notranslate">componentDidMount</code> via a ref.</p>
<p dir="auto">I've been trying to accomplish something that, if only I could figure out a way to do it, would be a killer paradigm for elegant, reusable view components.</p>
<p dir="auto">I've gotten in the habit of rendering my views like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const MyView = props =&gt; &lt;View {...props}&gt;
      &lt;Header&gt;
        &lt;Title&gt;
          ...
        &lt;/Title&gt;
      &lt;/Header&gt;
      &lt;Body&gt;
         ...
      &lt;/Body&gt;
      &lt;Footer&gt;
        ...
      &lt;/Footer&gt;
    &lt;/View&gt;;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">MyView</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">View</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Header</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Title</span><span class="pl-c1">&gt;</span>
          ...
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Title</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Header</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Body</span><span class="pl-c1">&gt;</span>
         ...
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Footer</span><span class="pl-c1">&gt;</span>
        ...
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Footer</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">View</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><code class="notranslate">&lt;View&gt;</code>, <code class="notranslate">&lt;Header&gt;</code>, etc. are magic components that actually render a component injected via context.  This means that, for instance, in one fell swoop, I can reskin any view as a bootstrap modal or panel, etc.:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Modal extends Component {
  static childContextTypes: {
    HeaderSkin: PropTypes.any,
    TitleSkin: PropTypes.any,
    ...
  };
  getChildContext() {
    return {
      HeaderSkin: ModalHeaderSkin, // (adds 'modal-header' class)
      TitleSkin: ModalTitleSkin, // (adds 'modal-title' class)
      ...
    };
  }
  ...
}

class Panel extends Component {
  ...
}

const modalView = &lt;Modal&gt;
  &lt;MyView/&gt;
&lt;/Modal&gt;;

const panelView = &lt;Panel&gt;
  &lt;MyView/&gt;
&lt;/Panel&gt;;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Modal</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">static</span> <span class="pl-c1">childContextTypes</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">HeaderSkin</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-s1">any</span><span class="pl-kos">,</span>
    <span class="pl-c1">TitleSkin</span>: <span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">any</span><span class="pl-kos">,</span>
    ...
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-en">getChildContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">HeaderSkin</span>: <span class="pl-v">ModalHeaderSkin</span><span class="pl-kos">,</span> <span class="pl-c">// (adds 'modal-header' class)</span>
      <span class="pl-c1">TitleSkin</span>: <span class="pl-v">ModalTitleSkin</span><span class="pl-kos">,</span> <span class="pl-c">// (adds 'modal-title' class)</span>
      ...
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  ...
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Panel</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  ...
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">modalView</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Modal</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">MyView</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Modal</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">panelView</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Panel</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">MyView</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Panel</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This is awesome, and I highly recommend it.  There's just one pesky little thing I can't do in all cases: <strong>animate <code class="notranslate">Header</code>, <code class="notranslate">Body</code>, and <code class="notranslate">Title</code> transitions individually when switching between views</strong>.</p>
<p dir="auto">I created a <code class="notranslate">Drilldown</code> component that provides a special <code class="notranslate">HeaderSkin</code> and <code class="notranslate">BodySkin</code> to animate transitions from the <code class="notranslate">Header</code> and <code class="notranslate">Body</code> of one view to those of another.  It crossfades the header and pans the body horizontally, like typical drilldowns.  The transitions work when the two views are of the same React Component type, but not when they are different -- because React can't keep the same Component instance mounted.</p>
<p dir="auto"><strong>I'm wondering if there could be a well-designed system for rendering components like my <code class="notranslate">Header</code>, <code class="notranslate">Body</code>, etc. <em>through some kind of wormhole</em> into a placeholder controlled by an ancestor component.</strong> With that capability, it would then be possible to drop view components of any type into my <code class="notranslate">Drilldown</code> and animate the transitions between their subcomponents.</p>
<p dir="auto">I remember trying to create such a wormhole once when I was less experienced with React.  But it quickly became hacky and I never got it working completely.  It basically revolved around <strong>passing elements to some callback in <code class="notranslate">this.context</code> inside <code class="notranslate">render()</code> methods</strong>, and the callback would then put the rendered element in the desired location in the ancestor.  I seem to remember there being a problem with things like refs though, and also needing to use <code class="notranslate">setTimeout</code> to delay the rendering of the wormholed component (since <code class="notranslate">render()</code> triggering other rendering is not kosher).</p>
<p dir="auto">Has anyone tried to do similar things?  Thoughts?</p>