Ionic-framework: bug: ion-range with bottom-drawer

[roman-rr]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:
ion-range drag events disabled after present inside pane.
important note: drag event's works well if pane presented immediately after DOM render

Expected behavior:
Drag events works for ion-range within Pane, even if Pane presented after some delay or with button.

Steps to reproduce:

1. Open link https://output.jsbin.com/dojoxiz
2. Click to Present Pane
3. Try to drag range knobs
4. Open second example where pane presented immediately https://output.jsbin.com/dutuciv
5. Try to drag range knobs

Related code:

Demo live
Demo immediately presented live

[roman-rr]

@liamdebeasi have you chance to look up ?

[liamdebeasi]

Are you able to reproduce this without the drawer component? If not, is it possible something in the drawer component gesture is interfering with the range gesture?

[roman-rr]

@liamdebeasi ok, I will check once again

[roman-rr]

@liamdebeasi
Simple example without Drawer: https://output.jsbin.com/xufazic
Bug faces when appear element with ion-range inside to any other element with .append() method.

let rangeElement = document.querySelector('#range'); // Container with ion-range
let newContainer = document.querySelector('#new-container'); // New empty div container
newContainer.append(rangeElement); // We lose drag ability after append

[sohep]

Is there any solution yet ?

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22407, and a fix will be available in an upcoming release of Ionic Framework.

[roman-rr]

Big thanks for collaboration!

[ionitron-bot[bot]]

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.