Why is there no way to dismiss the keyboard in the search bar?

[tzdevelopteam]

When using the search bar, the keyboard pops up while typing, and results are displayed below. However, after the results load, the entire screen is filled with them, and there seems to be no way to dismiss the keyboard except by tapping on the header.

Wouldn't it be more intuitive to allow dismissing the keyboard more easily? Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

Would it be possible to add an easier way to dismiss the keyboard?

[yokuze]

When using the search bar, the keyboard pops up while typing, and results are displayed below. However, after the results load, the entire screen is filled with them, and there seems to be no way to dismiss the keyboard except by tapping on the header.

Wouldn't it be more intuitive to allow dismissing the keyboard more easily? Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

Would it be possible to add an easier way to dismiss the keyboard?

There's an existing method on ion-searchbar to get a reference to the native input: https://ionicframework.com/docs/api/searchbar#getinputelement

Once you have that, dismissing the keyboard is just a call .blur(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur

[yokuze]

Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

The cancel and clear buttons have two different behaviors for two different use cases:

1. Clear: "I want to search, but there's already text in the searchbar. I've already focused the input and want to clear out the existing text and keep searching." <-- Keeps the keyboard/focus, because that's part of the users's workflow
2. Cancel: "I'm done searching and want to stop." <-- Dismisses the keyboard/focus, because the user is done searching

Even the positioning/placement of those two buttons (one inside the input, one outside) is part of that. Personally, I don't think that's redundant and wouldn't want to lose that API.

With the blur() method outlined above, I'd say we have the control we need.

I'm sympathetic if Ionic chooses not to make a "dismiss keyboard" a first-class method. That would be taking on ownership of making such a thing work consistently cross-browser. Providing a handle to the native input is good, because then they can spend that time doing other things like making more components and fixing bugs :)

[thetaPC]

Thank you for submitting the issue!

I'm unable to reproduce this on an iOS. I was able to close the keyboard by tapping on the "done" button.

Please provide a video that displays the issue so we can proceed with the investigation.

[tzdevelopteam]

I don't know why, but the "Done" button is not displaying in my app. Here is my code:

  <ion-item lines="none">
    <ion-searchbar
      show-clear-button="focus"
      [debounce]="300"
      (ionInput)="searchUsers($event.target.value)"
      [placeholder]="'CHAT_USER_SEARCH.SEARCH' | translate"
    ></ion-searchbar>
  </ion-item>

[HappyKnuckles]

Is there any plan to add this as a built-in feature? Also, shouldn't the default behavior of pressing "Enter" on the virtual keyboard be to trigger the search and dismiss the keyboard automatically? i had this complaint from a few users. Maybe a user contribution to have a directive to toggle if you want it dismissed on enter.