<p dir="auto">This is perhaps similar or related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="333068485" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/13065" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/13065/hovercard" href="https://github.com/facebook/react/issues/13065">#13065</a></p>
<p dir="auto">React version: 17.0.2<br>
(I observe the same behavior on 18.2.0)</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">Link to code example:<br>
<a href="https://codesandbox.io/s/react-input-caret-strange-behavior-gdd6ve?file=/src/App.tsx" rel="nofollow">https://codesandbox.io/s/react-input-caret-strange-behavior-gdd6ve?file=/src/App.tsx</a></p>
<ol dir="auto">
<li>Put the caret somewhere in the middle or at the beginning of the input field text.</li>
<li>Type something</li>
<li>Observe the caret behavior</li>
</ol>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The caret moves (jumps) to the end of the text</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The caret should stay in place</p>
<p dir="auto">I love that there are "invariant"s everywhere, but sometimes the errors they report aren't immediately understandable. For example, if a mixin defines a default prop that's also defined in your component, you get the lovely error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): Tried to merge two objects with the same key: [the duplicate key was here]"><pre class="notranslate"><code class="notranslate">Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): Tried to merge two objects with the same key: [the duplicate key was here]
</code></pre></div>
<p dir="auto">It took me a while to figure out the cause. <a href="http://jsfiddle.net/kb3gN/592/" rel="nofollow">jsfiddle</a></p>
<p dir="auto">Another I've run into is <code class="notranslate">Each child in an array should have a unique "key" prop. Check the render method of undefined.</code> (console.warn'd) Which happened when I had passed in an undefined function as an <code class="notranslate">onClick</code> prop.</p>