: focus-inside работает только при фокусировке кнопки с клавиатуры, а не при щелчке в Firefox 63

Question

У меня есть макет поля с внешним div (.field) и меткой, вводом и кнопкой внутри этого поля.Когда я фокусирую поле ввода, псевдо-селектор :focus-within совпадает, поэтому .field__inner получает цвет внешней границы.

Когда я использую tab для циклического перемещения по элементам, :focus-within совпадает, когда я фокусируюполе ввода или кнопка.

Но когда я нажимаю кнопку, :focus-within, похоже, не срабатывает (хотя и работает в Chrome).

Я пытался добавитьtabindex атрибут для кнопки, но это не имело никакого эффекта.

Я использую Firefox 63 на macOS.

.field__inner {
  border: 1px solid #000;
}

.field:focus-within .field__inner {
  border: 1px solid #f00;
}

<div class="field">
  <div class="field__inner">
    <label for="password" class="field__label">
      Name
    </label>
    <input type="text" class="field__input" value="">
    <button class="field__passwordreveal" type="button">
      Click this button!               
    </button>
  </div>
</div>

Как мне сохранить :focus-within в Firefox, когда я нажимаю кнопку?

Редактировать: добавлен анимированный GIF для демонстрации проблемы: