Как правильно отследить событие, чтобы скрыть нужные элементы?

Ссылка на код в github - https://github.com/GreatGleb/Recipes-of-sandwiches
У меня есть поле для ввода текста (числа) -
https://pp.userapi.com/c850628/v850628748/8dfae/FO...

при нажатии на него надпись - "Масса хлеба (кг)" поднимается вверх, уменьшается и меняет цвет,
при этом появляются стрелки для изменения вводимого числа -
https://pp.userapi.com/c850628/v850628748/8dfa0/Ut...

Когда поле для ввода пустое и мы кликаем по нему, с помощью события body onclick,
поле для ввода становится в исходное состояние и всё нормально.
Но!
Если мы кликаем не на страницу, не на body, а на консоль или пуск, то происходит следующее:
https://pp.userapi.com/c850628/v850628748/8dfb5/Z-...

поле ввода стаёт в исходное состояние, а стрелки не пропадают.
пробовал это изменить с помощью наложения события blur на поле ввода, чтобы, при пропадании фокуса на поле и при одновременной пустоте поля, стрелки пропадали.
Тогда они, стрелки, уходят тогда, когда нужно, но когда нажимаешь на пустое поле, и на появившиеся стрелки, то стрелки перестают работать и вместо изменения значения поля они пропадают и поле возвращается в исходное положение, как с самого начала.
Также пробовал создать дополнительное условие для blur , чтобы узнать размер или цвет надписи, которая изменяется при фокусировании, но это не помогло, а когда в консоли выводил цвет элемента, он не менялся, хотя надпись в поле по прежнему изменялась при фокусировании.
Ума не приложу, как это исправить.