[Feature]: Dismiss Keyboard on Drag

[howlettga]

Description

iOS 7 implemented UIScrollView.KeyboardDismissMode which allows you to drag down on the keyboard to dismiss it. It has become standard across the iOS app ecosystem. Capacitor should implement this dismiss mode to allow the keyboard to be dimissed properly.

Platforms

• iOS
• Android
• Web

Request or proposed solution

Implementation of KeyboardDismissMode so that the keyboard can be dismissed on drag when in a scrolling view.

Alternatives

No response

Additional Information

The keyboard gets stuck and can only be dismissed by clicking on a non-input area of the screen. This has not been standard UX practice in iOS for some time now, and it causes capacitor apps to have a very clunky interface in iOS.

If you have a list view with a search bar at the top, often times most of the list (and therefore view) is actionable via clicks. once you have finished searching, you scroll the list, and the keyboard needs to dismiss if you drag past it.

[howlettga]

I realized that I can use scroll events and keyboard dismissal to workaround specific iOS system settings... Posting code for others if they stumble upon this.

content.page.html

<ion-header>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content role="feed" [scrollEvents]="true" (ionScrollStart)=handleScroll"($event)">
  <ion-list>
    ...
  </ion-list>
</ion-content>

content.page.ts

import { Keyboard } from '@capacitor/keyboard';

handleScroll(event: Event) {
  if (event != null) {
    Keyboard.hide();
  }
}

[howlettga]

I do actually believe my solution is a workaround because there are use cases for wanting the keyboard dismiss on drag functionality without dismissing the keyboard on all scroll events.

#6064

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.