I'm having an issue with focus & click events with the floating webview. Using the HTML below in a floating webview action triggered by, for example, a Touch Bar button, try the following:
- Bring up the webview
- click somewhere outside the view to shift focus
- Click on the red 'click me' button
You'll see that the button changes colour, as per #button:active {} in the style section but the javascript isn't run until a second click, making it appear that something has happened when it hasn't really.
Also, the button has a pointer cursor over it but no longer has after the focus change unless I hide and re-show the view. The first I can work around but the cursor thing less so. On the face of it, it doesn't seem a big deal but it makes for a confusing user experience. Any thoughts?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Page!</title>
<style>
#button {
border: solid 1px #bbb;
padding: 10px;
width: 200px;
margin: 100px auto;
background: #fcc;
text-align: center;
cursor: pointer;
}
#button:active {
background: #bfb;
}
</style>
</head>
<body>
<div id="button" onclick="clicked()">click me</div>
<script>
function clicked() {
console.log( "clicked" )
document.getElementById("button").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>