Focus() on form submit does not work.

14 views
Skip to first unread message

susumu araki

unread,
Jun 16, 2021, 1:46:18 AM6/16/21
to unpoly

For example, if you do validation and focus() on the client side, it won't work.

ex.
<html>
<head>
<script>
const validate = ()=>{
//some validations...
//focus error item (but no focus)
let errorItem = document.getElementById('test');
errorItem.focus();
event.preventDefault();
}
</script>

</head>
<body>
<form>
<input type="text" id="test" name="test" value="">
<button type="submit" onclick="validate()">send</button>
</form>
</body>
</html>



Line 20312
    up.on('up:click', submitButtonSelector, function(event, button) {
      return button.focus();
    });
 
seems to be the cause.

As a workaround, we do the following

setTimeout(function(){
errorItem.focus()
,1});

Is there any other workar

randl...@googlemail.com

unread,
Jun 16, 2021, 6:00:22 AM6/16/21
to unpoly
Unpoly 2 focuses the submit button when clicked, so the button value can be included in the form submission on MacOS / Safari.

The final Unpoly 2 release will not do this for vanilla forms as in your example. However, you are still going to need your setTimeout() hack in a form handled by Unpoly.

Best regards
Henning
Reply all
Reply to author
Forward
0 new messages