0

I am using ionic framework 3 ( v 3.9.2). I use the search bar in the top nav and display results in a list below in the content. Pretty standard. However, the keyboard shows until I close it explicitly (using this.keyboard.hide() in my code) as a result of a user action ( e.g. user clicks cancel or clicks the search button on the keyboard). I use the Keyboard Plugin from Ionic.

What I ideally want is to hide the keyboard also when user starts scrolling on the search results, especially when results start showing up as they type in the search input box. Behavior same on Android and iOS - actual devices

Here is what I have tried: 1. On the ion-content, I monitor a scroll start event and then invoke the keyboard hide function. But it is flaky. The keyboard pops up twice sometimes, does not close all the time. 2. I could turn off the "display results while typing" and force the user to explicitly click search or cancel upon which I hide the keyboard which works fine , but that is not the user experience I want. 3. I tried to see if I could hide the keyboard when a blur event ( ionBlur) is triggered as I soon as I start scrolling ,but the blur never gets triggered

Any suggestions?

4
  • this: "On the ion-content, I monitor a scroll start event and then invoke the keyboard hide function" approach is valid. Can you share your code and provide more details around unexpected behavior - this can be fixed. Jan 6, 2019 at 17:53
  • Thanks Sergey for responding. Here is what I did. In the HTML I did this: <ion-content (ionScroll)="onScroll($event)">………. and in the TS file: onScroll(event:Event) { console.log('Scroll start fired'); this.keyboard.hide(); }
    – amazeus
    Jan 6, 2019 at 21:25
  • When I was testing in Android, the scroll start event fires fine, and the keyboard hides sometimes and sometimes not. Sometimes it hides and comes back up again and I have to scroll again to hide it.. It is unfortunately unpredictable and am not able to reproduce it consistently. Thanks
    – amazeus
    Jan 6, 2019 at 21:30
  • I see, let me propose how i would fix it in few hours Jan 6, 2019 at 22:34

3 Answers 3

0

So my theory would be that the approach "on the ion-content, I monitor a scroll start event and then invoke the keyboard hide function" can still be valid.

The issue with onScroll events is that they are firing in a rapid succession and this can cause issues and flakiness.

Try implementing simple "debounce" strategy:

// have this var in your ts file:

private scrollTriggered: boolean;

// update your onScroll method:

onScroll(event:Event) {
    if (!scrollTriggered) {
        this.keyboard.hide();
        this.scrollTriggered = true;
    }; 
} 

// now somewhere in your search input code (like ionInput) you need to reset flag to false:

this.scrollTriggered = false;

Idea is to ensure the keyboard.hide() is only called once on one time scroll event being triggered.

Please let me know if this works for you.

6
  • Thanks for the idea...I will try it and let you know. It will take me some time to test multiple scenarios
    – amazeus
    Jan 7, 2019 at 16:32
  • Yup, I think what I am proposing is similar to throttling here: developer.mozilla.org/en-US/docs/Web/Events/… but with "reset" of the scrollTriggered var located outside of the onScroll method. Your specific UX should hint at where its best to locate trigger reset I think Jan 7, 2019 at 17:51
  • Tested it. a bit better - but still flaky. For some reason, the scroll event gets fired automatically sometimes when my result list refreshes, which then closes the keyboard, when ideally it should not. The scenario is where steps are like this: search, scroll, keyboard hides, then scroll down to locate a particular result, then input some more text in the search bar, scroll again, keyboard hides sometimes and then reappears sometimes
    – amazeus
    Jan 7, 2019 at 19:29
  • Interesting I see. I will think about it a bit as well. Jan 7, 2019 at 20:27
  • Tested other scenarios. Most look ok, but still a bit flaky. I saw once when I scrolled up, the keyboard popped up. BTW, I use infinite scroll in my search results. Not sure if that is contributing to this behavior or conflicting with the scroll solution? in any case, I really appreciate your assistance Sergey!!
    – amazeus
    Jan 8, 2019 at 16:20
0

Ran into this issue myself. Had a searchbar combined with a virtual scroll component. As you menntioned, every time the list changed based on the searchbar input, there was a scroll event triggered, making it hard to hide the keyboard on a scroll event. After a lot of trial and error, I got this to work. For whatever reason, my scroll event triggered by the virtual scroll was null so a simple check to not close the keyboard if it was null fixed the problem for me.

Your HTML:

<ion-content (ionScrollStart)="onScrollStart($event)">

and your .ts:

    onScrollStart(event: any) {
    if (event === null) {
        return;
    }
    this.closeKeyboard();
}
0

The solution I found was to use the Keyboard plugin

import { Keyboard } from '@ionic-native/keyboard/ngx';

Add to providers for the component

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
    providers: [Keyboard] // <-- This line
})

Add to constructor

constructor(private keyboard: Keyboard) {}

Make sure your ion-content is tracking scroll events:

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">

Now simply make the method turn the keyboard off:

onScroll($event) {
    this.keyboard.hide();
}

This is probably suboptimal, but I don't see any better solutions around.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.