Правильная реализация потери фокуса input с отправкой данных

Всем добрый день. Хочу сделать следующее:

1. при нажатии на кнопку Войти появляется Имя
2. при нажатии на Имя появляется Поле редактирования с кнопкой Сохранения введенного имени (использую localstorage)
3. при потере фокуса или клике вне Поля ввода оно должно пропадать

Проблема: если пользователь нажал на кнопку Сохранения, должна срабатывать функция сохранения, но она срабатывает через раз, то есть при первом клике на кнопку теряется фокус и значение не сохраняется, при повторном клике значение сохраняется

var logoutBtn = document.querySelector('.user__logout');
var loginBtn = document.querySelector(".user__login-btn");
var userhide = document.querySelector('.user__hide');
var out = document.getElementById('out');

document.getElementById('entry').onclick = function () {
      out.innerHTML = 'UserName';
    loginBtn.style.display = "none";
    modalWindow.style.display = "none";
    logoutBtn.style.display = "block";
}

var inputName = document.querySelector('.change-name');
var nameSave = document.querySelector('.name-save');

out.onclick = function(e) {
  inputName.style.display = 'block';
  nameSave.style.display = 'block';
  out.style.display = 'none';
}

var inputHide = document.querySelector('.user__changename');

inputName.onblur = function() {
  inputName.style.display = 'none';
  nameSave.style.display = 'none';
  out.style.display = 'block';
}

nameSave.onclick = function() {
  out.innerHTML = 'ChangeName';
  inputName.style.display = 'none';
  nameSave.style.display = 'none';
  out.style.display = 'block';
}

Ps: пытался сделать другой вариант, чтобы при клике вне элемента Имя пропадало Поле ввода, но тогда не получается сделать фокус на нем и ввести какой-то текст.