question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: delegatesFocus patch for ios causes rendering issues with item sliding in chrome

See original GitHub issue

Prerequisites

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

  1. Click the ion-label of the ion-item
    • Do NOT let go of the mouse
  2. Drag the ion-item to the right until the cursor turns into a text-cursor
  3. Release the mouse
  4. Open the ion-item-sliding back up to see that the ion-item-option is 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 image

After option disappears image

And here’s a gif of the issue in action slider-issue

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.

slider-issue2 .

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Aug 25, 2022

Hey there,

I merged a fix in via https://github.com/ionic-team/ionic-framework/pull/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!

1reaction
liamdebeasicommented, 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: https://github.com/ionic-team/ionic-framework/discussions/25661

Read more comments on GitHub >

github_iconTop Results From Across the Web

Remove unwanted ads, pop-ups & malware - iPhone & iPad
Remove unwanted ads, pop-ups & malware. If you're seeing some of these problems with Chrome, you might have unwanted software or malware installed...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Fixed an issue where browser.tabs sometimes returned an incorrect URL for pinned tabs. Bug Fixes. Fixed the Share Menu when sharing an image...
Read more >
Shadow DOM v1 - Self-Contained Web Components
Subtle bugs creep up, CSS specificity becomes a huge issue ... That's because the element's shadow DOM is rendered in place of its...
Read more >
How do I resolve Duo Prompt display issues related to iOS or ...
While attempting to log in to a Duo-protected application on iOS or macOS, the Duo Prompt does not display as expected and the...
Read more >
Safari Not Working on Your iPhone? Here's How to Fix It
For this, open, say, a non-Apple app like Facebook or Chrome, and see whether the website or the feed loads. If it does,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found