Container Input doesn't work

[vforsh]

Version

Phaser 3.52 (3.51 and 3.50.1 were fine)

Description

Here is the scene display graph

• Scene
  -- Background image
  -- Container
  -- Image

All 3 game objects on the scene have input enabled (via setInteractive() call) but the container behaves like it has no input enabled. It seems like its hit area is located below the background image even though they render in the correct order.

Example Test Code

https://codesandbox.io/s/container-input-issue-my7gl
Try commenting line 21 to see the issue

[arbassic]

It looks like the issue is more common

Any interactive element placed below or within an interactive container captures input and do not pass it to the container.

Example Test Code

https://codesandbox.io/s/container-input-issue-2-2gqzp

[boo-ga-ga]

I think something similar also affects rexUI plugin dialog, in some cases the buttons stop being clickable. 3.51.0 and 3.50.0 were fine as well.

[rexrainbow]

@boo-ga-ga

I saw that clicking bug in dialog, but rexUI dose not use built-in container.

Edit: This issue will be fixed in my PR.

[boo-ga-ga]

@rexrainbow I see, thank you very much for the fix and your work!

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/problem-with-over-out-events-for-two-overlapping-containers/8791/3

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/problem-with-over-out-events-for-two-overlapping-containers/8791/6

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[Stever1388]

I'm still having issues with this in 3.53 and 3.54, the following code demonstrates the issue:
this.add.rectangle(0, 0, this.sys.canvas.width, this.sys.canvas.height, 0x351B03, 0.4).setOrigin(0).setInteractive() this.add.container(this.sys.canvas.width / 2, this.sys.canvas.height / 2).setSize(300, 300).setInteractive({ useHandCursor: true }).on(Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN, () => console.log("down"))

The container isn't clickable and you never get the "down" message in the console. If you remove the setInteractive from the rectangle, the container is clickable.

[halilcakar]

Yea I've tested this on Win10 with Chrome.

Following code is never calling container's input.

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    backgroundColor: '#010101',
    parent: 'phaser-example',
    scene: {
        create: create,
    }
};

var container;

var game = new Phaser.Game(config);

function create ()
{   
    const { width, height } = this.sys.canvas;
    let rect = this.add.rectangle(0, 0, width, height, 0x351B03, 0.4)
        .setOrigin(0)
        .setInteractive()
        .on(Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN, 
            () => console.log("rect-down"));

    let cont = this.add.container(width / 2, height / 2)
        .setSize(300, 300)
        .setInteractive({ useHandCursor: true })
        .on(Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN, 
            () => console.log("cont-down"))

    console.log(this)
}

Bdw DisplayList actually shows that container is on top of rectangle :)

I've tested same code with:
3.54.0, 3.53.1, 3.53.0 and 3.52.0 is only consoling "rect-down",

3.51.0 is working as expected.