I’m currently building an app which contains a long list of items which need to be filtered by a search-input at the top. We moved to collection-repeat to improve performance and it has worked fantastically except for an issue with the search functionality.
If I scroll down the list any significant amount and then enter text into the search-input, it appears that no results are returned. After some investigation, I realised that the results are present but just scrolled outside the view. The scroll position for the collection-repeat is not reset when the number of items changes (i.e. when it’s filtered by a search term).
Check this behaviour out at the following codepen
My current quick-fix solution to this problem is to add
ng-change="scrollTop()" to the input tag. The problem with this is that on a mobile device, when the user inputs a letter the input loses focus. This is quite annoying as the user might want to enter more than one letter into the search and has to keep re-selecting the input to do that. I can imagine it would be possible to set the focus to the input element after
scrollTop() has been fired but it would be ideal if we could get to the root of this issue and have a consistent fix. Or maybe I’m missing out on something else important here.