Closed
Description
Describe the bug
When a <select>
component contains a <CustomComponent let:options>
, when the user select an option, the following exception is thrown:
options is not defined
HTMLSelectElement.select_change_handler
[https://bhx905.csb.app/App.svelte:323:21]()
Reproduction
https://codesandbox.io/s/practical-hooks-bhx905?file=/App.svelte
Main component
<script>
import RemoteOptions from "./RemoteOptions.svelte";
let value = "";
// workaround
// let options = [];
</script>
<main>
<select bind:value={value}>
<option></option>
<RemoteOptions let:options={options}>
{#each options as option}
<option value={option.value}>{option.label}</option>
{/each}
</RemoteOptions>
</select>
value={value}
</main>
RemoteOptions component
<script>
let endpoint = new Promise(resolve => {
resolve([
{
value: "1",
label: "one"
},
{
value: "2",
label: "two"
}
]);
});
</script>
{#await endpoint}
<slot options={[]} />
{:then options}
<slot {options} />
{/await}
Logs
options is not defined
HTMLSelectElement.select_change_handler
[https://bhx905.csb.app/App.svelte:323:21]()
Doing some debug, the following code is generated:
let value = "";
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<App> was created with unknown prop '${key}'`);
});
function select_change_handler() {
value = (0, _internal.select_value)(this);
$$invalidate(0, value);
$$invalidate(2, options);
}
Note: options
is not defined, since it is the property exposed by the <RemoteOptions>
component
### System Info
```shell
System:
OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
CPU: (8) x64 Intel(R) Core(TM) i5-1035G7 CPU @ 1.20GHz
Memory: 672.45 MB / 15.39 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.4.0 - ~/.config/nvm/versions/node/v14.4.0/bin/node
Yarn: 1.22.11 - ~/.config/nvm/versions/node/v14.4.0/bin/yarn
npm: 6.14.5 - ~/.config/nvm/versions/node/v14.4.0/bin/npm
Browsers:
Brave Browser: 87.1.18.75
Chrome: 99.0.4844.51
Firefox: 90.0
npmPackages:
rollup: ^2.3.4 => 2.56.2
svelte: ^3.46.4 => 3.46.4
Severity
annoyance
Metadata
Metadata
Assignees
Labels
No labels