Что может привести к тому, что стиль :focus-visible не будет применен при использовании Element.focus() для фокусировки ⇐ Html

[Anonymous]

Я создал собственный компонент , который используется внутри ячейки таблицы при редактировании строки. Я также создал собственный крючок, который можно использовать в компонентах для передачи фокуса данному элементу при монтировании компонента.
В моем приложении элемент получает фокус, но стиль, который я определил с помощью :focus-visible, не применяется. Как мы видим на этом gif: https://i.sstatic.net/7Lst6.jpg
При активации «режима редактирования» для строк элемент фокусируется, но стиль не применяется. Затем я нажимаю следующий ввод и Shift+Tab возвращаюсь к элементу, а затем применяется стиль (цвет границы и толщина).
Когда я пытаюсь воспроизвести проблему во фрагменте stackoverflow, это волшебным образом работает так, как я хочу.
Почему это так? На что мне следует обратить внимание, что может повлиять на то, будет ли применен стиль :focus-visible?
использование этого хака решает мою проблему, но я бы хотел этого избежать:

Код: Выделить всё

element.contentEditable = true;
element.focus();
element.contentEditable = false;

Я сделал несколько журналов консоли как в своем приложении, так и во фрагменте. Оба по умолчанию выдают одинаковые выходные данные для element.contentEditable //inherit и element.isContentEditable //false.
Я не вижу очевидной разницы между тем, что у меня есть в моем приложении, и тем, что происходит во фрагменте.
Итак, еще раз, на что мне следует обратить внимание, что может повлиять на то, будет ли применен стиль :focus-visible? В чем здесь разница?

Код: Выделить всё

const useFocusOnMount = (ref) => {
React.useEffect(() => {
if (ref.current) {
ref.current.focus();
}
}, [ref]);
};

const App = (props) => {
const divRef = React.useRef(null)

useFocusOnMount(divRef);

return (



Lol



);
};

ReactDOM.render(, document.getElementById("root"));

Код: Выделить всё

.focusable {
padding: 5px;
box-sizing: border-box;
position: relative;
height: 30px;
width: 100px;
border: 1px solid lightgrey;
outline: none;
user-select: none;
background: green;
}

.focusable::before {
content: '';
position: absolute;
top: 5px;
right: 5px;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 5px solid black;
}

.focusable:focus {
border: 2px solid red;
}

.focusable:focus-visible {
border: 2px solid blue;
box-shadow: inset 0 0 0 1px blue;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/692 ... ment-focus