shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.86k stars 820 forks source link

Broken dropdown menu when importing sl-select with NPM #2228

Open ErraticFox opened 4 hours ago

ErraticFox commented 4 hours ago

Describe the bug

sl-select dropdown menu does not display nor function properly when imported via NPM.

To Reproduce

Steps to reproduce the behavior:

  1. Clone sl-select-bug
  2. Set up python env python -m venv venv and activate
  3. Install python requirements pip install -r .\requirements.txt
  4. Install node packages npm install
  5. run python .\run.py
  6. run npm run build
  7. open http://localhost:5000
  8. See error when using sl-select
  9. also see error in console when selecting item TypeError: _c.getTextLabel is not a function

Screenshots

image

Browser / OS

Additional information

This seems to be a bug with the node module because if I load shoelace via CDN, sl-select works fine. I've used countless of other shoelace components within my project importing with NPM without a problem.

KonnorRogers commented 4 hours ago

🤔 thats bizarre. I dont know what nonsense Webpack is pulling, but does the error go away if you add an import for <sl-tag>

import '@shoelace-style/shoelace/dist/components/tag/tag.js';

ErraticFox commented 3 hours ago

🤔 thats bizarre. I dont know what nonsense Webpack is pulling, but does the error go away if you add an import for <sl-tag>

import '@shoelace-style/shoelace/dist/components/tag/tag.js';

Just tried and negative. I think the first time I ran across this, I imported all the dependencies just to make sure and it still didn't fix it.

KonnorRogers commented 3 hours ago

🤔 on second look, its an issue with <sl-option>

https://github.com/shoelace-style/shoelace/blob/09024cfee5a346e1fbc2ce125ed66d4b15cd2fd6/src/components/select/select.component.ts#L202

https://github.com/shoelace-style/shoelace/blob/09024cfee5a346e1fbc2ce125ed66d4b15cd2fd6/src/components/select/select.component.ts#L406

Those are the only 2 spots I found which call slOption.getTextLabel() that don't have undefined checks. Can you try adding import '@shoelace-style/shoelace/dist/components/option/option.js';

But also, these should probably have undefined checks in case the option hasn't been defined yet.

ErraticFox commented 2 hours ago

That was the solution! Should then sl-option be an automatic imported dependency of sl-select as well?