My page has an input with autofocus="autofocus" but page.getFocusedElement() is null. I can confirm the page has the contents I expect. Moreover the input has the autofocus in page.asXML()
<input name="content" class="new-todo" placeholder="What needs to be done?" hx-vals="{"completed":"off"}" hx-post="/todo?" hx-target="body" hx-trigger="keyup[key=='Enter']" hx-on="htmx:beforeRequest: event.target.readOnly = true" required="required" autofocus="autofocus"/>I expected to see get my input in page.getFocusedElement(). Is this not implemented or did I miss something? Should it be a bug?
page.asXML():
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta charset="utf-8"/>
<title>
Ktor + htmx
</title>
<link href="/todoApp.css" rel="stylesheet"/>
<link href="/learnDrawer.css" rel="stylesheet"/>
<script src="/htmx.js" async="async">
</script>
<script>
//<![CDATA[
window.onload = function() {
document.body.addEventListener('htmx:configRequest', function(evt) {
const isInput = evt.detail.elt.tagName == 'INPUT';
const isCheckbox = evt.detail.elt.type == 'checkbox';
const isNotChecked = evt.detail.elt.checked == false;
if(isInput && isCheckbox && isNotChecked) {
const name = evt.detail.elt.name;
evt.detail.parameters[name] = "off";
}
});
}
//]]>
</script>
<style>
.htmx-indicator{opacity:0;transition: opacity 200ms ease-in;} .htmx-request .htmx-indicator{opacity:1} .htmx-request.htmx-indicator{opacity:1}
</style>
</head>
<body class="learn-bar">
<aside class="learn">
<header>
<h3>
Kotlin
</h3>
<span class="source-links">
<h5>
Kotlin Hypermedia Example
</h5>
<a href="https://github.com/corlaez">
Source
</a>
</span>
</header>
<hr/>
<blockquote class="quote speech-bubble">
<p>
Kotlin is a concise, strongly typed, cross-platform and fun language developed by Jetbrains. It's the recommended language to develop in Android but it is a general porpoise language and it can be used to write web servers.
</p>
<footer>
<a href="https://kotlinlang.org/">
Kotlin
</a>
</footer>
</blockquote>
<footer>
<hr/>
<em>
If you have other helpful links to share, or find any of the links above no longer work, please
<a href="https://github.com/corlaez">
let us know
</a>
.
</em>
</footer>
</aside>
<section class="todoapp">
<header class="header">
<h1>
todos
</h1>
<input name="content" class="new-todo" placeholder="What needs to be done?" hx-vals="{"completed":"off"}" hx-post="/todo?" hx-target="body" hx-trigger="keyup[key=='Enter']" hx-on="htmx:beforeRequest: event.target.readOnly = true" required="required" autofocus="autofocus"/>
</header>
<section class="main" style="display: none">
<input type="checkbox" name="completed" class="toggle-all" id="toggle-all"/>
<label hx-vals="{"completed":true}" hx-patch="/todos/toggle?" hx-target="body" for="toggle-all">
Mark all as complete
</label>
<ul class="todo-list">
</ul>
</section>
<footer class="footer" style="display: none">
<span class="todo-count">
<strong>
0
</strong>
items left
</span>
<ul class="filters">
<li>
<a class="selected" hx-get="/?" hx-target="body" hx-push-url="true">
All
</a>
</li>
<li>
<a class="" hx-get="/?selectedFilter=ACTIVE" hx-target="body" hx-push-url="true">
Active
</a>
</li>
<li>
<a class="" hx-get="/?selectedFilter=COMPLETED" hx-target="body" hx-push-url="true">
Completed
</a>
</li>
</ul>
<button class="clear-completed" style="display: none" hx-delete="/todos/completed?" hx-target="body">
Clear Completed
</button>
</footer>
</section>
<footer class="info">
<p>
Double-click to edit a todo
</p>
<p>
Created by Armando Cordova
</p>
<p>
Inpired by TodoMVC
</p>
</footer>
</body>
</html>HTML String returned by my browser:
HtmlUnit / htmlunit
HtmlUnit is a "GUI-Less browser for Java programs".
871
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too