Как input полю при потере фокуса запретить прыгать?

Question

[Username]

Написал компоненту TextField, если поле в фокусе, то оно одно стиля, если нет, то другого.
Если набрать текст и нажать крестик, то поле очистится и произойдёт мерцание смена стиля, поскольку поле потеряло фокус и вновь его обрело.
Как можно избавиться от этого мерцания?
https://codesandbox.io/s/6vmkjy141r

Answer 1

[0xD34F]

Делаем метод:

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

И добавляем его кнопке удаления значения в качестве обработчика соответствующего события:

onMouseDown={this.onMouseDown}

Comments

[Username]

ТЫ гений

Answer 2

[Igor]

Добавить к imput border: 1px solid transparent; У вас при фокусе добавляется 2 пикселя высоты за счет бордера, отсюда и меняется высота и идет прыжок, если вам нужно при фокусе менять цвет бордера то просто меняет border-color. а не размер бордера.