bug: keys Home, End, ArrowUp, ArrayDown not working in (ion-)textarea in popover

[appy-one]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Keys Home, End, ArrowUp, ArrayDown are not working when editing text in a <textarea> or <ion-textarea> when presented in an popover because ev.preventDefault() is called in overlays.ts:376 for 'ArrowDown', and other keys below.

Expected Behavior

Cursor should be able to move in a textarea when pressing those keys.

Steps to Reproduce

1. create component with a <textarea> or <ion-textarea>
2. open the component in a popover
3. focus the textarea input and enter some text with multiple lines
4. try moving the cursor with up, down, home and end keys

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (C:\Users\4ewou\AppData\Roaming\nvm\v14.15.4\node_modules\ionic)
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.10
OS : Windows 10

Additional Information

No response

[appy-one]

For others with this issue, a workaround is adding a keydown event handler to the <textarea> that stops event propagation: <textarea (keydown)="$event.stopPropagation()"></textarea>

[sean-perkins]

Thanks for reporting this issue! As you've been able to debug, the popover implementation has opinionated keyboard handlers, mainly focused around either nested popover interactions or handling the focused item in a list of ion-item.

This however does interfere with elements that have their own keyboard interactions, when used inside the popover. There is an internal API that you can verify with, that will disable the popover's internal keyboard interaction:

<ion-popover keyboard-events="false">
  ...
</ion-popover>

I appreciate the PR as well. It may take a little time to verify all the focus behavior and keyboard interactions, as we should back-fill integration tests for those test cases. I also want to explore in more detail why the popover needs such an opinionated implementation and if a simpler alternative exists.

[sean-perkins]

Can you test with this dev build and confirm if the issue is resolved?

npm install @ionic/angular 6.0.15-dev.11649448530.1093d192

I ended up only handling custom logic when the focus element is the host or the ion-item, which should allow all other keyboard events to pass through for a textarea or any other element.