You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
I'm using an ion-input inside and ion-accordion which is part of an ion-accordion-group. On my Android phone and several emulators, I have the issue that the input does not lose focus after tapping on other elements inside the same ion-accordion. That means keyboard remains open and cursor blinks within the input. It does lose the focus when I tap on elements outside the accordion group.
When placing then input outside of the accordion, it loses the focus as expected when tapping somewhere else. The issue is also reproducible with a normal input element, so it's probably rather connected to the accordion than to the ion-input.
The issue is not reproducible in the web (tested Firefox and Chrome). I don't have an iOS device, so I couldn't test it there.
Expected Behavior
When tapping on any other component, the input should lose the focus, which means the keyboard should hide and the cursor should be removed.
Steps to Reproduce
Given the following component html:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-accordion-group>
<ion-accordion>
<ion-item slot="header">Test</ion-item>
<div slot="content">
<!--Tapping on the input sets the focus to the input and opens the keyboard-->
<!--Tapping on the div afterwards does not remove the focus from the input and close the keyboard which I think is a bug-->
<div style="padding: 20px; font-size: 20px;">Test</div>
<ion-item>
<ion-input></ion-input>
</ion-item>
</div>
</ion-accordion>
</ion-accordion-group>
<!--Tapping on the input sets the focus to the input and opens the keyboard-->
<!--Tapping on the div afterwards removes the focus from the input and closes the keyboard, as expected-->
<div style="padding: 20px; font-size: 20px;">Test</div>
<ion-item>
<ion-input></ion-input>
</ion-item>
</ion-content>
On an Android phone or emulator:
Expand the test-accordion
Tap on the input. It will receive the focus, keyboard appears, cursor blinks
Tap on the div above the input. Focus remains on the input. Keyboard still visible, cursor still blinking
Whereas doing the same with input and div outside the accordion group, the focus is removed from the input.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
I'm using an ion-input inside and ion-accordion which is part of an ion-accordion-group. On my Android phone and several emulators, I have the issue that the input does not lose focus after tapping on other elements inside the same ion-accordion. That means keyboard remains open and cursor blinks within the input. It does lose the focus when I tap on elements outside the accordion group.
When placing then input outside of the accordion, it loses the focus as expected when tapping somewhere else. The issue is also reproducible with a normal input element, so it's probably rather connected to the accordion than to the ion-input.
The issue is not reproducible in the web (tested Firefox and Chrome). I don't have an iOS device, so I couldn't test it there.
Expected Behavior
When tapping on any other component, the input should lose the focus, which means the keyboard should hide and the cursor should be removed.
Steps to Reproduce
Given the following component html:
On an Android phone or emulator:
Whereas doing the same with input and div outside the accordion group, the focus is removed from the input.
Code Reproduction URL
https://github.com/wrzr123/accordion-input-test.git
Ionic Info
Ionic:
Ionic CLI : 6.20.9 (C:\Users...\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 19.2.4
@angular-devkit/schematics : 19.2.4
@angular/cli : 19.2.4
@ionic/angular-toolkit : 12.1.1
Capacitor:
Capacitor CLI : 7.1.0
@capacitor/android : 7.1.0
@capacitor/core : 7.1.0
@capacitor/ios : not installed
Utility:
cordova-res (update available: 0.15.4) : 0.15.3
native-run : 2.0.1
System:
NodeJS : v22.14.0 (C:\Program Files\nodejs\node.exe)
npm : 10.8.1
OS : Windows 10
Additional Information
No response
The text was updated successfully, but these errors were encountered: