# Uncaught TypeError on 'dragend' event

**URL:** <https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753>\
**Category:** Phaser 3\
**Created:** [June 7, 2021, 3:51pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753 "2021-06-07T15:51:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [June 7, 2021, 3:51pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/1 "2021-06-07T15:51:17Z")

</div>

Hi, I have a drag end event in my program, and I get this error when I try to drag something out of the screen:  
Uncaught TypeError: Cannot read property ‘renderList’ of undefined

This error happens when the ‘dragend’ event triggers when the pointer is outside of this. I think this could be affecting the flow of the program a little bit, and if someone could tell me how to avoid this could be great.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 7, 2021, 5:12pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/2 "2021-06-07T17:12:11Z")

</div>

> [@Mastertaco](#):
>
> Uncaught TypeError: Cannot read property ‘renderList’ of undefined

What is the stack trace? Click the error message to open it.

---

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [June 7, 2021, 5:28pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/3 "2021-06-07T17:28:48Z")

</div>

This is the full error:  
Uncaught TypeError: Cannot read property ‘renderList’ of undefined  
at InputPlugin.sortGameObjects (phaser.js:187734)  
at InputPlugin.processOverOutEvents (phaser.js:186899)  
at InputPlugin.update (phaser.js:185813)  
at InputManager.updateInputPlugins (phaser.js:93090)  
at InputManager.onMouseUp (phaser.js:93320)  
at onMouseUpWindow (phaser.js:94514)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 7, 2021, 6:15pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/4 "2021-06-07T18:15:42Z")

</div>

That’s very strange. What is some of your input code?

---

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [June 7, 2021, 7:13pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/5 "2021-06-07T19:13:09Z")

</div>

This is my ‘drag’ event:

```
    this.input.on(EVENTS.DRAG, (pointer, obj, dragX, dragY)=>{
        timeClicked = true;
        if(pointer.y >0 && pointer.y < MAX_HEIGHT) {
            if (dragY>67 && dragY<951) {
                obj.y = dragY;
            }
        }
    });

```

Is used to move a container only on the Y axis under certain limits.  
And this is my ‘dragend’ event:

```
    this.input.on(EVENTS.DRAG_END, (pointer, obj)=>{
        setTimeout(()=>{
            timeClicked = false;
        },300);
        //Momentum animation
        let dutime = pointer.upTime - pointer.downTime;
        let speed = pointer.upY - pointer.downY;
        if(pointer.upY < 0) {
            dutime = 0;
            speed = 0;
            this.tableCont.body.setVelocityY(0);
            //this.tableCont.y = 68;
            let ContSupTween = this.tweens.add({
                targets: this.tableCont,
                y: 68,
                ease: 'Quad.easeIn',
                duration: 100,
            })
        }
        if(pointer.upY > MAX_HEIGHT) {
            dutime = 0;
            speed = 0;
            this.tableCont.body.setVelocityY(0);
            let ContInfTween1 = this.tweens.add({
                targets: this.tableCont,
                y: 950,
                ease: 'Quad.easeIn',
                duration: 100
            })
        }
        if (Math.abs(speed) > 100) {
            if (Math.abs(speed) < 200) {
                speed = 0;
            }
            obj.body.setVelocityY(speed / (dutime / 1000));
        }
    });

```

The ‘dragend’ event validates where the pointer is and if is offscreen it just moves the object to a certain position, it also adds a little bit of momentum just to be more visually attractive.  
Also, the timeClicked variable is used to differentiate between a drag and a click

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 7, 2021, 7:47pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/6 "2021-06-07T19:47:44Z")

</div>

I don’t know. Try to make a test case?

---

<div class="post-metadata">

**Author:** ![FredyVzq29](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/fredyvzq29/32/7096_2.png) [@FredyVzq29](https://phaser.discourse.group/u/FredyVzq29)\
**Post date:** [November 16, 2022, 2:51pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/7 "2022-11-16T14:51:56Z")

</div>

This bug has only come up a couple of times and it’s really hard to replicate (last time I just randomly clicked and dragged the scene).

```javascript
zone.js:1777 Uncaught TypeError: Cannot read properties of undefined (reading 'renderList')
    at initialize.sortGameObjects (phaser.js:187734:35)
    at initialize.processOverOutEvents (phaser.js:186899:18)
    at initialize.update (phaser.js:185813:35)
    at initialize.updateInputPlugins (phaser.js:93090:47)
    at initialize.onMouseUp (phaser.js:93320:14)
    at onMouseUpWindow (phaser.js:94514:25)
    at rn.___hb (browser.ts:175:25)
    at q.invokeTask (zone.js:443:35)
    at q.runTask (zone.js:214:51)
    at q.invokeTask [as invoke] (zone.js:525:38)

```

```javascript
    sortGameObjects: function (gameObjects, pointer)
    {
        if (gameObjects.length < 2)
        {
            return gameObjects;
        }

        var list = pointer.camera.renderList; // <--- Here

        return gameObjects.sort(function (childA, childB)
        {
            return list.indexOf(childB) - list.indexOf(childA);
        });
    },

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 17, 2022, 3:14pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/8 "2022-11-17T15:14:09Z")

</div>

> <https://github.com/photonstorm/phaser/issues/5699>
>
> \<!--
> Thank you for taking the time to contribute towards Phaser. Before submitt…ing your issue, check the following:
> 
> 1. This repo is for Phaser 3 only. Phaser 2.x issues should be raised in the \[Phaser CE\](https://github.com/photonstorm/phaser-ce) repo.
> 
> 2. This repo should not be used for technical support. If you're struggling to use Phaser then post your question to the \[forum\](https://phaser.discourse.group/) or \[Discord\](https://phaser.io/community/discord) channels. GitHub Issues are for bugs and feature requests only.
> 
> 3. Make sure your issue isn't a duplicate, or has already been fixed.
> 
> 4. If your issue contains \_any\_ form of hostility it will be closed and you will be blocked from access to all our repos. Be nice. We do this for free.
> 
> 5. If all the above is ok, fill out the template below.
> \--\>
> 
> 
> \## Version
> \<!--
> Enter the version of Phaser you're using. You can find this output to the Dev Tools console in your browser.
> \--\>
> \* Phaser Version: 3.54.0
> \<!--
> Place the operating system \*\*below\*\* this comment.
> \--\>
> \* Operating system: Windows
> \<!--
> If the bug is browser specific, please enter the version \*\*below\*\* this comment:
> \--\>
> \* Browser: Tested on both Chrome and FIrefox
> 
> 
> \## Description
> 
> \<!--
> Write a detailed description of the bug \*\*below\*\* this comment. Include the expected behavior and what actually happens. If the issue is device specific, please say so.
> \--\>
> Error when dragging an object outside the game area, if the object is constrained and the object is on top of another interactive object.
> 
> In my testing, this did not occur when the game object was not constrained, and it did not occur when it was not on top of another interactive object. I discovered this when trying to create a volume slider for my game, for which the slider knob was constrained to the slider area.
> 
> Although it does not crash the game, the error shows up on console.
> 
> Steps to reproduce (using test code below):
> 
> 1. Click the green box and begin dragging it
> 2. Keep dragging until the mouse pointer is outside the game area (e.g. in the white area of the page background)
> 3. Release the mouse button
> 4. Console will show:
> \`\`\`
> Uncaught TypeError: Cannot read property 'renderList' of undefined
> at initialize.sortGameObjects (phaser.min.js:1)
> at initialize.processOverOutEvents (phaser.min.js:1)
> at initialize.update (phaser.min.js:1)
> at initialize.updateInputPlugins (phaser.min.js:1)
> at initialize.onMouseUp (phaser.min.js:1)
> at onMouseUpWindow (phaser.min.js:1)
> \`\`\`
> 
> This appears to be because the camera associated with the pointer is undefined when the event takes place outside the game area.
> 
> \## Example Test Code
> 
> https://codepen.io/lyger-zero/pen/PopNKbM
> 
> \`\`\`js
> const game = new Phaser.Game({
> parent: "phaser-root",
> width: 800,
> height: 600,
> scene: {
> create: create,
> }
> })
> 
> function create() {
> const rect1 = this.add.rectangle(400, 300, 800, 600, 0xff0000).setInteractive();
> const rect2 = this.add.rectangle(400, 300, 200, 100, 0x00ff00).setInteractive();
>   
> this.input.setDraggable(rect2);
>   
> rect2.on("drag", function(pointer, dragX, dragY) {
> rect2.x = Phaser.Math.Clamp(dragX, 200, 600);
> rect2.y = Phaser.Math.Clamp(dragY, 100, 400);
> });
> }
> \`\`\`
> 
> \<!--
> All issues must have source code demonstrating the problem. We automatically close issues after 30 days if no code is provided.
> 
> The code can be pasted directly below this comment, or you can link to codepen, jsbin, or similar. The code will ideally be runnable instantly. The more work involved in turning your code into a reproducible test case, the longer it will take the fix the issue.
> \--\>
> 
> 
> \## Additional Information
> 
> \<!--
> Is there anything else you think would be useful for us to reproduce the error? Do you have a solution in mind?
> 
> If you have any screen shots or gifs demonstrating the issue (if it can't be seen when running your code), please include those too.
> \--\>