Repository navigation
bug: delegatesFocus patch for ios causes rendering issues with item sliding in chrome #25273
Description
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
- Nightly
Current Behavior
When you click to drag an ion-item inside of an ion-item-sliding and you have an ion-input in the ion-item if you start the drag by hovering over the ion-label, then end the drag while hovering over the ion-input the slider abruptly jiggles to the left, slams shut, and when you drag it to open it again the ion-item-option is missing.
You can fix the ion-item-sliding by dragging it back to the left even though it is already shut.
I believe the issue is that the ion-item-option is somehow being pushed out of view.
Expected Behavior
I expect that when I am intending to drag an ion-item inside an ion-item-sliding that releasing the mouse while hovering over an ion-input will not cause the ion-item-sliding to close, or for the ion-item-option to disappear when re-opening.
Steps to Reproduce
- Click the
ion-labelof theion-item- Do NOT let go of the mouse
- Drag the
ion-itemto the right until the cursor turns into a text-cursor - Release the mouse
- Open the
ion-item-slidingback up to see that theion-item-optionis now gone
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option>Test</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Test Slider</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-item-sliding>Before option disappears
After option disappears
And here's a gif of the issue in action
Code Reproduction URL
https://github.com/deving1995/ion-item-sliding-issue
Ionic Info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
Require stack:
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package'
Require stack:
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
- C:\Users\dgero\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
Ionic:
Ionic CLI : 6.18.1 (C:\Users\dgero\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.4
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : not installed
@capacitor/core : 3.5.1
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe)
npm : 8.6.0
OS : Windows 10
Additional Information
The reason I believe the issue is that the ion-item-option is being pushed off screen is because you can actually get the ion-item-option to be partially out of view.
.
Activity
liamdebeasi commentedon May 11, 2022
Thanks for the issue. This appears to be a Chrome specific bug. Focusing the input seems to cause the view to scroll/translate.
deving1995 commentedon May 13, 2022
Thank you for the information, is there a workaround for this?
liamdebeasi commentedon May 18, 2022
This issue is caused by https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/item.tsx#L294. There is a bug on iOS 13 where delegatesFocus is not working correctly. As a result, we added a patch to try and fix the behavior.
Unfortunately, this had the unintended side effect of introducing the behavior reported here. Once we drop support for iOS 13, we should be able to remove this patch.
As for a workaround, you could try using a native
<input>element instead of<ion-input>for now. The patch only activates ifion-itemdetects anion-inputorion-textarea: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/item.tsx#L284[-]bug: ion-item-sliding with ion-input causes ion-item-option to disappear [/-][+]bug: delegatesFocus patch for ios causes rendering issues with item sliding in chrome[/+]liamdebeasi commentedon Aug 2, 2022
Hi there,
We are proposing some changes to form components that seek to resolve this issue. We would love your feedback on these proposed changes! You can read more about the changes and leave comments here: #25661
deving1995 commentedon Aug 4, 2022
Thank you!
liamdebeasi commentedon Aug 25, 2022
Hey there,
I merged a fix in via #25822 that resolves this issue. The relevant code was originally there to work around an iOS 13 bug. We will be dropping iOS 13 support in Ionic 7, so we are targeting the fix for that release.
I am going to close this since the code has been merged, but let me know if you have any questions. Thanks for the report!
ionitron-bot commentedon Sep 24, 2022
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 Ionic, please create a new issue and ensure the template is fully filled out.