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

combobox option issue with auto selecting option and issues with virtualization #2124

Closed
PieNappl3 opened this issue Jun 12, 2024 · 5 comments
Assignees
Labels
🐛 bug Something isn't working react @digdir/designsystemet-react

Comments

@PieNappl3
Copy link

PieNappl3 commented Jun 12, 2024

Description of the bug

when searching combobox, if value property is lowercase and matches one of the options in combobox it will auto select, this becomes an issue when we have some of our datasets value where we will have to select 01 before we can search for 01.1 01.2 and so on, i'd asume this would also be an issue if value is regular numbers where you cannot search for key 1000 before you've selected 1, 10 and 100. this is not an issue with keys that use uppercase.

virtualization still seems to have an issue with our largest dataset, if i search for a code that does not exist it will crash. same crash happens in example storybook thousands of options https://storybook.designsystemet.no/?path=/story/komponenter-combobox--thousands-of-options
and
https://next.storybook.designsystemet.no/?path=/story/komponenter-combobox--thousands-of-options
virtualization seems to have been fixed for our medium-large datasets that also crashed previously
(in codesandbox example below it also crashes with a different error: "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops")

https://codesandbox.io/p/sandbox/broken-night-tk7wjl?file=%2Fsrc%2FApp.tsx
with filter and multiple virtual sets if you start typing a search that has results but then end up typing something that does not have results, then backspace it will behave weird. in codesandbox if i search NDI i get option 42 and a couple on 400+ but if i then add another character so i get no results like NDII and backspace to NDI i have 0 results and comboboxempty is not showed either, if i then backspace again to ND i only have results over 400 and option 42 does not reappear until the entire field is cleared

Steps To Reproduce

filter needs to be added to avoid first bug when searching for values otherwise it would auto select the first perfect match of value

https://codesandbox.io/p/sandbox/broken-night-tk7wjl?file=%2Fsrc%2FApp.tsx
write: NDI in search, observe 42 being in the set and add another I so search is NDII with 0 results
backspace to NDI and first bug appears with blank box
backspace again to ND and some results appear but option 42 or any other option below 400 is missing

Additional Information

"dependencies": {
"@digdir/designsystemet-css": "0.11.0-alpha.2",
"@digdir/designsystemet-react": "1.0.0-rc.6",
"@digdir/designsystemet-theme": "1.0.0-rc.6",

No response

@PieNappl3 PieNappl3 added the 🐛 bug Something isn't working label Jun 12, 2024
@mimarz mimarz added the react @digdir/designsystemet-react label Jun 17, 2024
@mimarz
Copy link
Collaborator

mimarz commented Jun 17, 2024

Thanks for reporting this!

We'll look into this soon hopefully.

@Barsnes
Copy link
Member

Barsnes commented Jun 17, 2024

In this commit, I fixed one of our objects lying about how many children were being rendered - and it seems like this has fixed the issue.

I'll let you know when we publish another next version, so you can test :)

As for the other issue, it was comparing what you typed in the input to the value, not the label. Should have been resolved in this commit.

@mimarz
Copy link
Collaborator

mimarz commented Jun 17, 2024

I have published a new next version which includes these fixes so we can test the fix "downstream" :)

 - @digdir/designsystemet-css => 0.11.0-alpha.4
 - @digdir/designsystemet-react => 1.0.0-rc.8
 - @digdir/designsystemet-theme => 1.0.0-rc.8

@PieNappl3
Copy link
Author

cat-cool-cat
looks good so far 😎 👍

@mimarz
Copy link
Collaborator

mimarz commented Jun 19, 2024

This will be released in #2130

@mimarz mimarz closed this as completed Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working react @digdir/designsystemet-react
Projects
Archived in project
Development

No branches or pull requests

3 participants