Skip to content

[Bug]: Dropdown breaks with e.g. \n in label #3203

@smilingthax

Description

@smilingthax

Describe the bug

The <Dropdown> component breaks when opened and the given data generates labels containing certain special characters.

Steps to Reproduce

```sql xx
VALUES ('123', '1 2\n3'), ('124', '1 2 4')
```
<Dropdown data={xx} name=webgl0 value=col0 label=col1 />

On the Page, click open the dropdown, and hover over the 1 2 3 entry.

Logs

[Error] SyntaxError: '[data-cmdk-item][data-value="1 2
3"]' is not a valid selector.
	querySelector (@evidence-dev_core-components.js:216143)
	(anonyme Funktion) (@evidence-dev_core-components.js:216143)
	sync (chunk-H5XMEHA6.js:74)
	(anonyme Funktion) (chunk-H5XMEHA6.js:88)
	set (chunk-H5XMEHA6.js:30)
	update (chunk-H5XMEHA6.js:38)
	updateState (@evidence-dev_core-components.js:145726)
	select (@evidence-dev_core-components.js:216743)
	(anonyme Funktion) (@evidence-dev_core-components.js:216725)

System Info

Severity

serious, but I can work around it

Additional Information, or Workarounds

This is fixed via huntabyte/cmdk-sv@fa2406f, but core-components currently uses:

Please update to ^0.0.19.
(Workaround is adding it to local overrides).

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingto-reviewEvidence team to review

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions