hoping you can answer a question. I noticed that the autofocus attribute in a contenteditable div does not work in Firefox. It does work in Chrome and Edge.
<!doctype html>
<html lang="en-US">
<head>
<title>Focus</title>
<meta charset="utf-8">
</style>
</head>
<body>
<div contenteditable autofocus><div>
</body>
</html>
If I add some javascript before the body close tag:
<script>
window.onload = () => {
// autofocus doesn't work in contenteditable, so add this javascript
document.querySelector("[contenteditable]").focus();
}
</script>
Now I see the focus ring, but FF doesn't actually set focus. There is no cursor/caret and when I type, nothing appears in the div.
So I add some more javascript to put an empty string in the div textcontent. The whole thing now looks like this:
<!doctype html>
<html lang="en-US">
<head>
<title>Test<title>
<meta charset="utf-8">
</style>
</head>
<body>
<div contenteditable autofocus><div>
<script>
window.onload = () => {
// autofocus doesn't work in contenteditable, so add this javascript
document.querySelector("[contenteditable]").focus();
// firefox doesn't actually set focus without putting something in text content?
document.querySelector("[contenteditable]").textContent = "";
}
</script>
</body>
</html>
Finally it works.
I'm on FF 95.0.1 in Ubuntu but I saw the same behavior in Windows 10. What gives? Am I missing something?