Searchbar input loses focus when loading indicator is displayed

Ionic Framework ionic-v3
1

I have a page where the user can type some name in a ionic-searchbar component that triggers a server request to return some results. The results are immediately displayed in a ionic-list below the search bar.

I have added a loading indicator (Loading component) when the HTTP request is fired. It is dismissed when the response is received.

The problem is that when the loading indicator (modal) appears on top of the page, the input field loses the focus and the keyboard is hidden.

This is not practical for the user who must touch the input to refocus it after each letter typed.

How could I avoid this problem and leave the focus on the search field and the keyboard open while the loading indicator is shown ?

1 Like
2

Nevermind the question.

I realized that it was not a good UI anyway to block the whole screen on each keystroke. I replaced the Loading component with a spinner inside a list item and it is much cleaner. I kept the full loading indicator for when data is loaded and screen is changing at the same time.

1 Like
3

Hi
Have you solved your issue, please let me know also. Iā€™m stuck on this too. Please help me.