Select component - 'mousedown' handler took ++++ms

[broken tinsel]

I have this parent component that has the Mantine Select. Changing the value takes 3+ seconds every time.

I use the Select component to change the params on a get request.

As you can see, the value changes instantly. It's just that the Select dropdown takes too long to close

[broken tinsel]

additional context: i am rendering 500 rows of data

[next cosmos]

Use limit prop with searchable select to prevent excessive items rendering

[broken tinsel]

ohh sorry im not talking about the data prop of Select.

I use Select to change my filters. The data then returns 500 items based on that filter. I tried commenting out the data rendering part and i no longer have the issue :/ Is this an optimization problem on my end? or there's an actual performance issue with the select dropdown if there are lots of data rendered?

[next cosmos]

mousedown triggers items rendering in dropdown

[broken tinsel]

here's a quick demo

[next cosmos]

Use limit prop with searchable select to prevent excessive items rendering

[broken tinsel]

this is not a searchable select

[broken tinsel]

i added this code just to see if there's a problem with the component

const [isPending, startTransition] = useTransition();
console.log({ isPending });

return (
  ...
  <Select
    value={value}
    onChange={(newValue) => {
      startTransition(() => {
        setValue(newValue);
      })
    }}
  />
  ...
);

The dropdown closes instantly now, but the value change still has delay

[next cosmos]

Yes, that is why I advise to make select searchable and set limit prop to avoid performance issues.

[broken tinsel]

ok i tried that, still has the issue

if i render only 1 row, i no longer have the issue. Maybe this is just a rendering problem on my end but this is my first time to encounter this :/