[v4] reorder-group does not work properly when used in custom stencil components

[ghost]

Bug Report

I am implementing a set of custom stencil components which are partly made up of Ionic V4 components. However, there are issues when using the ion-reorder-group component.

Ionic Info
@ionic/core: 4.0.0-beta.15
@stencil/core: 0.15.1

Describe the Bug
When the ion-reorder-group element is not within the initial viewport, the reorder animations are not displayed properly and the currently dragged item is not inserted at the right position within the reorder-group.

Steps to Reproduce

1. Init Stencil project ( component - starter )
2. Install ionic/core module
3. Replace initial my-component implementation with the example provided below ( Make sure the height of the placeholder div is sufficient to push the ion-reorder-group element out of the viewport )
4. run project and try to reorder list items

import { Component} from '@stencil/core';
import "@ionic/core"

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css'
})
export class MyComponent {

  reorder(event){
    event.detail.complete();
  }

  render() {
    return [
      <div style={{width: '100%', height: '1000px'}}>
        Just for demonstration purposes
      </div>,
      <ion-list>
        <ion-reorder-group disabled={false} onIonItemReorder={ev => this.reorder(ev)} >
          <ion-item>
            <ion-label>Test 1</ion-label>
            <ion-reorder></ion-reorder>
          </ion-item>
          <ion-item>
            <ion-label>Test 2</ion-label>
            <ion-reorder></ion-reorder>
          </ion-item>
          <ion-item>
            <ion-label>Test 3</ion-label>
            <ion-reorder></ion-reorder>
          </ion-item>
          <ion-item>
            <ion-label>Test 4</ion-label>
            <ion-reorder></ion-reorder>
          </ion-item>
        </ion-reorder-group>
      </ion-list>
    ];
  }
}

Expected Behavior
When dragging an item within an ion-reorder-group, the animations should be displayed properly. When dropping an item, it should be inserted at the correct position within the list.

[brandyscarney]

Thanks for the issue! Sorry I know this is a late reply but I am working on updating the documentation for the reorder-group and found this issue. I think the issue here is true has to be passed to complete():

event.detail.complete(true);

Otherwise it assumes that you don't want to finish the reorder and bounces the item back. I was able to get this working in the stencil conference app by passing true. I am running version "@ionic/core": "4.3.0". If you're still having issues with this version please let me know!

I personally think the complete() should work the same with or without true being passed, but I'd have to look into if this would be a breaking change or not.

[brandyscarney]

I'm going to reopen this because our documentation states it should work with just complete() and no variable passed so I believe this is a bug.

[ionitron-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.