fix: improve select handling of dynamic value with placeholders (#12181)

* fix: improve select handling of dynamic value with placeholders

* format
pull/12164/head
Dominic Gannaway 1 year ago committed by GitHub
parent 59f7bd6f9f
commit 5811236ba5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
fix: improve select handling of dynamic value with placeholders

@ -39,10 +39,12 @@ export function select_option(select, value, mounting) {
* @param {() => V} [get_value] * @param {() => V} [get_value]
*/ */
export function init_select(select, get_value) { export function init_select(select, get_value) {
let mounting = true;
effect(() => { effect(() => {
if (get_value) { if (get_value) {
select_option(select, untrack(get_value)); select_option(select, untrack(get_value), mounting);
} }
mounting = false;
var observer = new MutationObserver(() => { var observer = new MutationObserver(() => {
// @ts-ignore // @ts-ignore

@ -0,0 +1,6 @@
<script>
let { children, ...rest } = $props();
</script>
<select name="pets" id="pet-select1" {...rest}>
{@render children()}
</select>

@ -0,0 +1,7 @@
import { test } from '../../test';
export default test({
html: `<div><label for="pet-select">Choose a pet 1:</label><select id="pet-select1" name="pets">
<option value="">--Please choose an option--</option><option value="dog">Dog</option><option value="cat">Cat</option></select></div><div><label for="pet-select">Choose a pet 2:</label>
<select id="pet-select2" name="pets"><option value="">--Please choose an option--</option><option value="dog">Dog</option><option value="cat">Cat</option></select></div>`
});

@ -0,0 +1,21 @@
<script>
import Select from './Select.svelte'
</script>
<div>
<label for="pet-select">Choose a pet 1:</label>
<Select>
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</Select>
</div>
<div>
<label for="pet-select">Choose a pet 2:</label>
<select name="pets" id="pet-select2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>
Loading…
Cancel
Save