Skip to content

select_change_handler fails with exposed slot property #7394

Closed
@caleeli

Description

@caleeli

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions