Lazy loading is not triggered on filter input change in Dropdown

[paveldayneko]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case

https://codesandbox.io/s/mystifying-bhaskara-v2twz?file=/src/demo/DropdownDemo.js

Current behavior Filter input does not trigger virtual load

Expected behavior onLazyLoad callback should be called on filter input change

Minimal reproduction of the problem with instructions

• Create virual scroll dropdown with lazy load
• Add filter
• Try to type some text in filter's input
• Nothing happens

• PrimeReact version: 7.1.0 and 7.2.0

• Browser: [Chrome]

• Language: [all]

[Catstein]

i'm having the same problem, i tried to force a solution by calling the "onFilter" method with the same "onlazyload" property call.. and it didn't work either :/

[melloware]

Yep right now it looks like the only thing filter is doing is setting the scroll index of lazy list back to 0.

    const onFilterInputChange = (event) => {
        virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);

        props.onFilterInputChange && props.onFilterInputChange(event);
    }

[vinirossa]

it's also happening with me, i've tried several things but i cant make it work :c

[dani-ras]

so are there any workarounds recommended? what does invoke the onlazyload fn? maby its possible to mock a trigger event

[melloware]

I think it needs to be fixed in the component I just don't know what to fix it to.

[jonmferreira]

Hello budy, how are you?

I come to propose an alternative way of using dropdown with an asynchronous filter. Here's the proposal, I hope it helps you: Live code

[yabelozub]

Hi guys! I am facing the same problem, did something of a workaround with a hardcoded non-clickable itemTemplate. Hope this gets fixed soon...

[DieterMorar]

Hi, having the same issue. My workaround:

onFilter={() => {
      const scrollerRef: HTMLElement | null = document.querySelector('.p-virtualscroller-content');
      if (scrollerRef?.style?.transform) {
        scrollerRef.style.transform = 'translate3d(0px, 0px, 0px)';
      }
    }
}