How to stop the focus of input element from jumping back and forth?

Issue

When the button is pressed it generates random numbers, that goes into the input box. Now, once the input box overflows, I have set the focus, so that it is visible what is going into the input box. Now the problem is, observe after there's overflow, if you keep the button pressed the focus comes back to left and when you release it, the focus goes back to right, which looks very disturbing, I just want to fix that. I hope what I am trying to say is clear.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  // concatenate random number to input value
  input.value += Math.floor(Math.random() * 10)
  // focus input to scroll to end
  input.focus();
});

input {
  width: 5rem;
}

<input type='text' readonly='true' value='0'>
<button>Click</button>

Solution

Simply add direction: rtl; in your input CSS.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  input.value += Math.floor(Math.random() * 10)
});

html, body {
  background: black;
}

input {
  width: 15rem;
	height: 3rem;
	margin: 2rem .4rem 2rem .4rem;
	font-size: 3rem;
  text-align: right;
  color: white;
  background-color: black;
  outline: none;
  transition: all .1s ease;
  direction: rtl;
}

<input type='text' readonly='true' value='0'>
<button>CLICK ME</button>

UPDATED

According to your last link https://codepen.io/ssmkhrj/pen/ExPjJab

This you should change in your code

<div class="display-cover">
  <div class="display"></div>
</div>  

and CSS

.display-cover{
  width: 19.2rem;
  height: 3rem;
  margin: 0 .4rem 1.5rem .4rem;
  text-align: right;
  font-size: 3rem;
  white-space: nowrap;
  padding-bottom: 0.5rem;
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* this will do the magic for parent */
}


.display{
  height: 3rem;
  display: inline-block;
  scroll-snap-align: end; /* this will do the magic for child */
}

More about this scroll-snap here https://css-tricks.com/practical-css-scroll-snapping/

Answered By - focus.style