mirror of https://github.com/sveltejs/svelte
feat: support `defaultValue` on `<select>` (#18591)
Closes #18447 --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>pull/18721/head
Ion
1 month ago
committed by
GitHub
parent
b433f3cd87
commit
c575b07bca
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: support `defaultValue` on `<select>`
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
import { flushSync } from 'svelte';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
/** @param {HTMLSelectElement} select @param {boolean[]} expected */
|
||||||
|
function check(select, expected) {
|
||||||
|
assert.deepEqual(
|
||||||
|
[...select.options].map((option) => option.selected),
|
||||||
|
expected
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {HTMLSelectElement} select @param {number[]} indexes */
|
||||||
|
function select(select, indexes) {
|
||||||
|
for (let i = 0; i < select.options.length; i++) {
|
||||||
|
select.options[i].selected = indexes.includes(i);
|
||||||
|
}
|
||||||
|
select.dispatchEvent(new Event('change', { bubbles: true }));
|
||||||
|
}
|
||||||
|
|
||||||
|
const selects = target.querySelectorAll('select');
|
||||||
|
const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
|
||||||
|
/** @param {string} name */
|
||||||
|
const button = (name) => /** @type {HTMLButtonElement} */ (target.querySelector(`.${name}`));
|
||||||
|
|
||||||
|
check(selects[0], [false, true, false]);
|
||||||
|
check(selects[1], [false, false, true]);
|
||||||
|
check(selects[2], [false, true, false]);
|
||||||
|
check(selects[3], [true]);
|
||||||
|
check(selects[4], [false, true]);
|
||||||
|
check(selects[5], [false, true, false]);
|
||||||
|
check(selects[6], [true, false]);
|
||||||
|
check(selects[7], [true, false, true]);
|
||||||
|
check(selects[8], [false, false, true]);
|
||||||
|
|
||||||
|
select(selects[0], [2]);
|
||||||
|
select(selects[1], [0]);
|
||||||
|
select(selects[5], [2]);
|
||||||
|
select(selects[7], [1]);
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
reset.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
flushSync();
|
||||||
|
check(selects[0], [false, true, false]);
|
||||||
|
check(selects[1], [false, true, false]);
|
||||||
|
check(selects[5], [false, true, false]);
|
||||||
|
check(selects[7], [true, false, true]);
|
||||||
|
|
||||||
|
select(selects[2], [2]);
|
||||||
|
select(selects[5], [2]);
|
||||||
|
button('update').click();
|
||||||
|
flushSync();
|
||||||
|
check(selects[2], [false, false, true]);
|
||||||
|
check(selects[5], [false, false, true]);
|
||||||
|
assert.deepEqual(
|
||||||
|
[...selects[5].options].map((option) => option.defaultSelected),
|
||||||
|
[true, false, false]
|
||||||
|
);
|
||||||
|
|
||||||
|
button('add').click();
|
||||||
|
flushSync();
|
||||||
|
await Promise.resolve();
|
||||||
|
check(selects[3], [true, false]);
|
||||||
|
assert.equal(selects[3].options[1].defaultSelected, true);
|
||||||
|
|
||||||
|
reset.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
flushSync();
|
||||||
|
check(selects[0], [true, false, false]);
|
||||||
|
check(selects[2], [true, false, false]);
|
||||||
|
check(selects[3], [false, true]);
|
||||||
|
check(selects[5], [true, false, false]);
|
||||||
|
|
||||||
|
select(selects[5], [2]);
|
||||||
|
select(selects[7], [1]);
|
||||||
|
button('remove').click();
|
||||||
|
button('clear').click();
|
||||||
|
flushSync();
|
||||||
|
assert.equal(
|
||||||
|
[...selects[5].options].some((option) => option.defaultSelected),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
assert.equal(
|
||||||
|
[...selects[7].options].some((option) => option.defaultSelected),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
reset.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
flushSync();
|
||||||
|
check(selects[5], [true, false, false]);
|
||||||
|
check(selects[7], [false, false, false]);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
<script>
|
||||||
|
let selected1 = $state();
|
||||||
|
let selected2 = $state('c');
|
||||||
|
let selected3 = $state();
|
||||||
|
let selected4 = $state(['c']);
|
||||||
|
let defaultValue = $state('b');
|
||||||
|
let multipleDefault = $state(/** @type {string[] | undefined} */ (['a', 'c']));
|
||||||
|
let options = $state(['a']);
|
||||||
|
let props = $state({ defaultValue: 'b' });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<select {defaultValue} bind:value={selected1}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {defaultValue} bind:value={selected2}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {defaultValue}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select defaultValue="b">
|
||||||
|
{#each options as option}
|
||||||
|
<option value={option}>{option}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select defaultvalue="b">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {...props} bind:value={selected3}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {...{ defaultValue: 'b' }} defaultValue="a">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select multiple defaultValue={multipleDefault}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select multiple defaultValue={multipleDefault} bind:value={selected4}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input type="reset" value="Reset" />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="update"
|
||||||
|
onclick={() => {
|
||||||
|
defaultValue = 'a';
|
||||||
|
props.defaultValue = 'a';
|
||||||
|
}}>Update defaults</button
|
||||||
|
>
|
||||||
|
<button type="button" class="add" onclick={() => options.push('b')}>Add option</button>
|
||||||
|
<button type="button" class="remove" onclick={() => delete props.defaultValue}>Remove default</button>
|
||||||
|
<button type="button" class="clear" onclick={() => (multipleDefault = undefined)}>Clear defaults</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p>{selected1} {selected2} {selected3} {selected4.join(',')}</p>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<select>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option selected="" value="b">B</option>
|
||||||
|
</select>
|
||||||
|
<select>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option selected="" value="b">B</option>
|
||||||
|
</select>
|
||||||
|
<select>
|
||||||
|
<option selected="" value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
<select multiple="">
|
||||||
|
<option selected="" value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option selected="" value="c">C</option>
|
||||||
|
</select>
|
||||||
|
<select>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option selected="" value="b">B</option>
|
||||||
|
</select>
|
||||||
|
<select>
|
||||||
|
<option selected="" value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script>
|
||||||
|
const props = { defaultValue: 'b' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select defaultValue="b">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {...props}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select defaultValue="b" value="a">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select multiple="" defaultValue={['a', 'c']}>
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
<option value="c">C</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select defaultvalue="b">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select {...{ defaultValue: 'b' }} defaultValue="a">
|
||||||
|
<option value="a">A</option>
|
||||||
|
<option value="b">B</option>
|
||||||
|
</select>
|
||||||
Loading…
Reference in new issue