slightly different approach

pull/10617/head
Simon Holthausen 2 years ago
parent a825d457ab
commit 00c1800759

@ -1,6 +1,7 @@
import { DEV } from 'esm-env';
import { render_effect } from '../../../reactivity/effects.js';
import { stringify } from '../../../render.js';
import { listen_to_event_and_reset_event } from './shared.js';
/**
* @param {HTMLInputElement} input
@ -9,7 +10,7 @@ import { stringify } from '../../../render.js';
* @returns {void}
*/
export function bind_value(input, get_value, update) {
input.addEventListener('input', () => {
listen_to_event_and_reset_event(input, 'input', () => {
if (DEV && input.type === 'checkbox') {
throw new Error(
'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
@ -72,7 +73,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
binding_group.push(input);
input.addEventListener('change', () => {
listen_to_event_and_reset_event(input, 'change', () => {
// @ts-ignore
var value = input.__value;
@ -114,7 +115,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
* @returns {void}
*/
export function bind_checked(input, get_value, update) {
input.addEventListener('change', () => {
listen_to_event_and_reset_event(input, 'change', () => {
var value = input.checked;
update(value);
});

@ -1,4 +1,5 @@
import { effect } from '../../../reactivity/effects.js';
import { listen_to_event_and_reset_event } from './shared.js';
/**
* Selects the correct option(s) (depending on whether this is a multiple select)
@ -58,7 +59,7 @@ export function selected(option) {
export function bind_select_value(select, get_value, update) {
var mounting = true;
select.addEventListener('change', () => {
listen_to_event_and_reset_event(select, 'change', () => {
/** @type {unknown} */
var value;

@ -25,3 +25,32 @@ export function listen(target, events, handler, call_handler_immediately = true)
};
});
}
let listening_to_form_reset = false;
/**
* Listen to the given event, and then instantiate a global form reset listener if not already done,
* to notify all bindings when the form is reset
* @param {HTMLElement} element
* @param {string} event
* @param {() => void} handler
*/
export function listen_to_event_and_reset_event(element, event, handler) {
element.addEventListener(event, handler);
// @ts-expect-error
element.__on_reset = handler;
if (!listening_to_form_reset) {
listening_to_form_reset = true;
document.addEventListener('reset', (evt) => {
requestAnimationFrame(() => {
if (!evt.defaultPrevented) {
for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
// @ts-expect-error
e.__on_reset?.();
}
}
});
});
}
}

Loading…
Cancel
Save