Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

select_change_handler fails with exposed slot property #7394

Closed
caleeli opened this issue Mar 25, 2022 · 1 comment
Closed

select_change_handler fails with exposed slot property #7394

caleeli opened this issue Mar 25, 2022 · 1 comment

Comments

@caleeli
Copy link

caleeli commented Mar 25, 2022

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

@gtm-nayan
Copy link
Contributor

fixed by #8969

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants