digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
68 stars 34 forks source link

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

Closed PieNappl3 closed 1 week ago

PieNappl3 commented 2 weeks ago

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

mimarz commented 2 weeks ago

Thanks for reporting this!

We'll look into this soon hopefully.

Barsnes commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

cat-cool-cat looks good so far 😎 👍

mimarz commented 1 week ago

This will be released in #2130