iOS form accessory bar next/prev arrows don't work on inputs inside ion elements

form accessory bar next/prev arrows don’t work on inputs nested inside ion elements. Seems to be same as this issue posted here:

I searched and found this on webkits bug forum

but Im still facing the same issue. I tested using inputs outside ion elements and the arrows work fine but once wrapped inside ion elements they are greyed out.

<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-input></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>

ionic info:
Ionic:

Ionic CLI : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.5.2
@angular-devkit/build-angular : 0.1100.5
@angular-devkit/schematics : 11.0.5
@angular/cli : 11.0.5
@ionic/angular-toolkit : 3.0.0

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 11 other plugins)

Utility:

cordova-res : 0.15.2
native-run : not installed

System:

ios-deploy : 1.11.3
ios-sim : 8.0.2
NodeJS : v12.4.0 (/usr/local/Cellar/node/12.4.0/bin/node)
npm : 6.14.10
OS : macOS Big Sur
Xcode : Xcode 12.3 Build version 12C33

I verified all nom packages are up to date as well.