CdkVirtualScoll and Keyboard

Used technologies:
Ionic v6, Capacitor 3, Angular

Used Components:
cdk-virtual-scroll-viewport

I have a problem with cdk-virtual-scroll, in practice if I open and close the keyboard while I have a scrolled list in the app, when I return to the list it is not displayed, but if I move the list it reappears.

I have no errors on Android Studio, also this problem does not occur on Ios.

With a video it definitely becomes clearer:
Video On My Drive

I solved it by adding this code:
window.dispatchEvent(new Event('resize'));
both in the ionViewDidLeave of the page that I leave where I could open the keyboard and in the ionViewDidEnter of the page where I have the list with cdk-virtual-scroll.

This is working, even if you notice annoying refreshes when going on the list, but it’s definitely not a permanent solution. Unfortunately cdk-virtual-scroll has several problems with Ionic, as it was not created for this.

1 Like