Почему фокус исчезает после ввода только одной цифры года в поле с типом «date»?

Проблема, вероятно, заключается в том, что при вводе только одной цифры года браузер автоматически переключается в режим ввода текста, так как необходимо ввести еще две цифры для полного года. Это приводит к потере фокуса и стилевого оформления поля.

Чтобы исправить это, можно использовать JavaScript для проверки введенной даты и добавления недостающих цифр года. Например, можно добавить обработчик события ввода в поле date, который будет автоматически дополнять год до полной даты.

Пример кода:

```html
<input type="date" id="yearInput">

<script>
  const yearInput = document.getElementById('yearInput');
  
  yearInput.addEventListener('input', function() {
    const value = yearInput.value;
    
    if (value.length === 4) {
      // Добавляем проверку на то, что введенная дата является корректной
      const dateObject = new Date(value);
      if (!isNaN(dateObject.getTime())) {
        // Если дата корректная, оставляем как есть
      } else {
        // Если дата некорректная, стираем значение
        yearInput.value = '';
      }
    } else if (value.length === 1) {
      // Если введена только одна цифра, добавляем "202"
      yearInput.value = '202';
    }
  });
</script>
```

Этот код будет добавлять "202" к введенной одной цифре года, чтобы дата оставалась в формате "гггг". Также, при вводе трех цифр года, обработчик события проверит, является ли введенная дата корректной, и оставит значение поля как есть или стерет.

Надеюсь, это поможет вам исправить проблему с потерей фокуса и стилевого оформления при выборе года в поле с типом «date».