Feat: Add readonly binding focused

Author: RaiVaibhav

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2727,7 +2727,9 @@ export const template_visitors = {
 				case 'checked':
 					call_expr = b.call(`$.bind_checked`, state.node, getter, setter);
 					break;
-
+				case 'focused':
+					call_expr = b.call(`$.bind_focused`, state.node, setter);
+					break;
 				case 'group': {
 					/** @type {import('estree').CallExpression[]} */
 					const indexes = [];

packages/svelte/src/compiler/phases/bindings.js

@@ -21,6 +21,7 @@ export const binding_properties = {
 		event: 'durationchange',
 		omit_in_ssr: true
 	},
+	focused: {},
 	paused: {
 		valid_elements: ['audio', 'video'],
 		omit_in_ssr: true

packages/svelte/src/internal/client/dom/elements/bindings/universal.js

@@ -67,3 +67,31 @@ export function bind_property(property, event_name, type, element, get_value, up
 		}
 	});
 }
+
+/**
+ * @param {HTMLElement} element
+ * @param {(value: unknown) => void} update
+ * @returns {void}
+ */
+export function bind_focused(element, update) {
+	var focus_handler = () => {
+		update(true);
+	}
+	var blur_handler = () => {
+		update(false);
+	}
+
+	element.addEventListener('focus', focus_handler);
+	element.addEventListener('blur', blur_handler);
+
+	/** @type {ReturnType<typeof setTimeout>} */
+
+	render_effect(() => {
+		if(element === document.activeElement) {
+			update(true)
+		} else {
+			update(false)
+		}
+
+	});
+}

packages/svelte/src/internal/client/dom/elements/events.js

@@ -25,7 +25,6 @@ export function event(event_name, dom, handler, capture, passive) {
 			return handler.call(this, event);
 		}
 	}
-
 	dom.addEventListener(event_name, target_handler, options);
 
 	// @ts-ignore
@@ -149,7 +148,6 @@ export function handle_event_propagation(handler_element, event) {
 
 		current_target = parent_element;
 	}
-
 	// @ts-expect-error is used above
 	event.__root = handler_element;
 	// @ts-expect-error is used above

packages/svelte/src/internal/client/index.js

@@ -44,7 +44,7 @@ export { bind_prop } from './dom/elements/bindings/props.js';
 export { bind_select_value, init_select, select_option } from './dom/elements/bindings/select.js';
 export { bind_element_size, bind_resize_observer } from './dom/elements/bindings/size.js';
 export { bind_this } from './dom/elements/bindings/this.js';
-export { bind_content_editable, bind_property } from './dom/elements/bindings/universal.js';
+export { bind_content_editable, bind_property, bind_focused } from './dom/elements/bindings/universal.js';
 export { bind_window_scroll, bind_window_size } from './dom/elements/bindings/window.js';
 export {
 	once,

packages/svelte/tests/runtime-legacy/samples/binding-focused/_config.js

@@ -0,0 +1,72 @@
+import { tick } from 'svelte';
+
+import { ok, test } from '../../test';
+
+export default test({
+
+	html: `
+		<div>false</div>
+		<div>false</div>
+		<input type="number">
+		<input type="number">
+		<button>click</button>
+	`,
+
+	ssrHtml: `
+		<div></div>
+		<div></div>
+		<input type="number">
+		<input type="number">
+		<button>click</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [d1, d2] = target.querySelectorAll('div')
+		const [in1, in2] = target.querySelectorAll('input');
+		const button = target.querySelector('button');
+		ok(in1);
+		ok(in2);
+		ok(button);
+		ok(d1);
+		ok(d2);
+		assert.equal(d1.textContent, 'false');
+		assert.equal(d2.textContent, 'false');
+		const event1 = new window.MouseEvent('click', { bubbles: true })
+		in1.value = '1';
+		await in1.dispatchEvent(event1);
+		await tick();
+		assert.equal(window.document.activeElement, in1)
+		assert.equal(component.a, true);
+		assert.equal(component.b, false);
+		assert.equal(d1.textContent, 'true');
+		assert.equal(d2.textContent, 'false');
+
+
+		in2.value = '1';
+		const event2 = new window.MouseEvent('click', { bubbles: true })
+		await in2.dispatchEvent(event2);
+		await tick();
+		assert.equal(component.a, false);
+		assert.equal(component.b, true);
+		assert.equal(d1.textContent, 'false');
+		assert.equal(d2.textContent, 'true');
+
+		const event3 = new window.MouseEvent('click', { bubbles: true })
+		await button.dispatchEvent(event3);
+		await tick();
+
+		assert.equal(d1.textContent, 'false');
+		assert.equal(d2.textContent, 'false')
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>false</div>
+				<div>false</div>
+				<input type="number">
+				<input type="number">
+				<button>click</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/binding-focused/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let a;
+	let b;
+</script>
+<div>{a}</div>
+<div>{b}</div>
+<input type="number" bind:focused={a} onclick='{e => e.target.focus()}' />
+<input type="number" bind:focused={b} onclick='{e => e.target.focus()}' />
+<button onclick='{e => e.target.focus()}'>click</button>