diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js index 1393342eee..07760592d4 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js @@ -205,25 +205,25 @@ export function RegularElement(node, context) { build_set_attributes(attributes, class_directives, style_directives, context, node, node_id); - // If value binding exists, that one takes care of calling $.init_select - if (node.name === 'select' && !bindings.has('value')) { - context.state.init.push( - b.stmt(b.call('$.init_select', node_id, b.thunk(b.member(attributes_id, 'value')))) - ); - - context.state.update.push( - b.if( - b.binary('in', b.literal('value'), attributes_id), - b.block([ - // This ensures a one-way street to the DOM in case it's . We need it in addition to $.init_select - // because the select value is not reflected as an attribute, so the - // mutation observer wouldn't notice. - b.stmt(b.call('$.select_option', node_id, b.member(attributes_id, 'value'))) - ]) - ) - ); - } + // // If value binding exists, that one takes care of calling $.init_select + // if (node.name === 'select' && !bindings.has('value')) { + // context.state.init.push( + // b.stmt(b.call('$.init_select', node_id, b.thunk(b.member(attributes_id, 'value')))) + // ); + + // context.state.update.push( + // b.if( + // b.binary('in', b.literal('value'), attributes_id), + // b.block([ + // // This ensures a one-way street to the DOM in case it's . We need it in addition to $.init_select + // // because the select value is not reflected as an attribute, so the + // // mutation observer wouldn't notice. + // b.stmt(b.call('$.select_option', node_id, b.member(attributes_id, 'value'))) + // ]) + // ) + // ); + // } } else { /** If true, needs `__value` for inputs */ const needs_special_value_handling = diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 80d390441d..103c2cfcdb 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -20,8 +20,9 @@ import { clsx } from '../../../shared/attributes.js'; import { set_class } from './class.js'; import { set_style } from './style.js'; import { ATTACHMENT_KEY, NAMESPACE_HTML } from '../../../../constants.js'; -import { block, branch, destroy_effect } from '../../reactivity/effects.js'; +import { block, branch, destroy_effect, effect } from '../../reactivity/effects.js'; import { derived } from '../../reactivity/deriveds.js'; +import { init_select, select_option } from './bindings/select.js'; export const CLASS = Symbol('class'); export const STYLE = Symbol('style'); @@ -483,11 +484,18 @@ export function attribute_effect( /** @type {Record} */ var effects = {}; + var is_select = element.nodeName === 'SELECT'; + var inited = false; + block(() => { var next = fn(...deriveds.map(get)); set_attributes(element, prev, next, css_hash, skip_warning); + if (inited && is_select) { + select_option(/** @type {HTMLSelectElement} */ (element), next.value, false); + } + for (let symbol of Object.getOwnPropertySymbols(effects)) { if (!next[symbol]) destroy_effect(effects[symbol]); } @@ -503,6 +511,12 @@ export function attribute_effect( prev = next; }); + + if (is_select) { + init_select(/** @type {HTMLSelectElement} */ (element), () => prev.value); + } + + inited = true; } /** diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js index 20f95af5ec..c9b7cea4f0 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js @@ -25,7 +25,11 @@ export function select_option(select, value, mounting) { } // Otherwise, update the selection - return select_options(select, value); + for (var option of select.options) { + option.selected = value.includes(get_option_value(option)); + } + + return; } for (var option of select.options) { @@ -136,16 +140,6 @@ export function bind_select_value(select, get, set = get) { init_select(select); } -/** - * @param {HTMLSelectElement} select - * @param {unknown[]} value - */ -function select_options(select, value) { - for (var option of select.options) { - option.selected = value.includes(get_option_value(option)); - } -} - /** @param {HTMLOptionElement} option */ function get_option_value(option) { // __value only exists if the