polaris icon indicating copy to clipboard operation
polaris copied to clipboard

Listbox debounce not working

Open romain-trotard opened this issue 1 year ago • 1 comments

Summary

Hello,

I was looking at the Listbox code and found that debounce is not wrapped in useCallback so it won't work because the reference will change at each render.

The problem has been introduce in this PR.

I am not sure if we want to keep the debounce and useCallback it. Or just remove the debounce wrapping.

I am hyped to push a PR once I know the solution we want :)

Thanks in advance.

Expected behavior

The callback handleScrollIntoView should be called once.

Actual behavior

Video of the problem

We can see that the function is executed multiple time. In the video, I increased the debounced delay to 1_000 ms

Steps to reproduce

  • Put a console log in the function handleScrollIntoView
  • I used the code of the example "With search" https://polaris.shopify.com/components/lists/listbox?example=listbox-with-search

The example I used

  • Trigger the execution of the function -> focus first item and trigger down button multiple times
  • See that the log is displayed multiple times

Note: it's possible to increase the delay to be sure that we are fast enough

Are you using React components?

None

Polaris version number

12.15.0

Browser

No response

Device

No response

romain-trotard avatar Feb 13 '24 19:02 romain-trotard