title: React Js Text input cursor position for mozilla
body: <p>I want to set position of the cursor at end of the text. I can do that, no issues there.
  Problem is in <code>mozilla</code>. It works fine for short text. In case of long text I don't know if the cursor is being placed at the end or not. Let's assume it does cuz it works fine for short text.
  On <code>google chrome</code> if there is long text the cursor is placed at the end when onFocus is called and text sort of scrolls towards left so that end of the text is visible with the cursor. </p>
  
  <p>Now, that scrolling thing should happen on <code>mozilla</code> but it doesn't. I need help.</p>
  
  <p><code>Mozilla</code> example:</p>
  
  <p><a href="https://i.stack.imgur.com/yAnRj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yAnRj.png" alt="mozilla example"></a></p>
  
  <p>Google chrome example: 
  <a href="https://i.stack.imgur.com/6rLP3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6rLP3.png" alt="chrome example"></a></p>