Merge pull request #1588 from egrs/click-to-focus

click on focusable elements calls focus() with events

src/browser/Page.zig

@@ -3045,21 +3045,25 @@ pub fn handleClick(self: *Page, target: *Node) !void {
                 return;
             }
 
+            try element.focus(self);
             try self.scheduleNavigation(href, .{
                 .reason = .script,
                 .kind = .{ .push = null },
             }, .anchor);
         },
-        .input => |input| switch (input._input_type) {
-            .submit => return self.submitForm(element, input.getForm(self), .{}),
-            else => self.window._document._active_element = element,
+        .input => |input| {
+            try element.focus(self);
+            if (input._input_type == .submit) {
+                return self.submitForm(element, input.getForm(self), .{});
+            }
         },
         .button => |button| {
+            try element.focus(self);
             if (std.mem.eql(u8, button.getType(), "submit")) {
                 return self.submitForm(element, button.getForm(self), .{});
             }
         },
-        .select, .textarea => self.window._document._active_element = element,
+        .select, .textarea => try element.focus(self),
         else => {},
     }
 }

src/browser/tests/document/focus.html

@@ -88,3 +88,46 @@
   testing.expectEqual(focused, document.activeElement);
 }
 </script>
+
+<script id="click_focuses_element">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusCount = 0;
+  let blurCount = 0;
+
+  input1.addEventListener('focus', () => focusCount++);
+  input1.addEventListener('blur', () => blurCount++);
+  input2.addEventListener('focus', () => focusCount++);
+
+  // Click input1 — should focus it and fire focus event
+  input1.click();
+  testing.expectEqual(input1, document.activeElement);
+  testing.expectEqual(1, focusCount);
+  testing.expectEqual(0, blurCount);
+
+  // Click input2 — should move focus, fire blur on input1 and focus on input2
+  input2.click();
+  testing.expectEqual(input2, document.activeElement);
+  testing.expectEqual(2, focusCount);
+  testing.expectEqual(1, blurCount);
+}
+</script>
+
+<script id="click_focuses_button">
+{
+  const btn = $('#btn1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  btn.click();
+  testing.expectEqual(btn, document.activeElement);
+}
+</script>