How to prevent an input field from jumping when focus is lost?

Question

React

Wrote to the TextField component, if the field is in focus, then it has one style, if not, then another.
If you type some text and click the cross, the field will clear and a flickering change of style will occur as the field lost focus and regained it.
How can I get rid of this flicker?
https://codesandbox.io/s/6vmkjy141r

Answer 1

Making a method:

onMouseDown(e) {
  e.preventDefault();
}

And add it to the delete value button as a handler for the corresponding event:
onMouseDown={this.onMouseDown}

Answer 2

Add to imput border: 1px solid transparent; When you focus, 2 pixels of height are added due to the border, from here the height changes and there is a jump, if you need to change the color of the border when focusing, then simply changes the border-color. not the size of the border.