GUI Pointer Issues

I’ve run into an issue with GUI, perhaps because of what I’m trying to do.

I have a “main card window” card with several controls that will be interactive to open an additional card window. The control in the center of this card is a Rectangle with another control in side of it. The rectangle has onPointerEnterObservable and onPointerOutObservable events to create a hover effect.

The control is created in this file starting on line 93

When I click on the rectangle, I’m showing another plane with an ADT in front of the current one. That part works as expected, but because the new card appears in front of the old one, the onPointerOutObservable from the main card Rectangle never fires, leaving the control in a hovered state.

The issue starts when firing onPointerUpObservable on line 32

Also, I’m not sure if this is caused by the issue above or a separate issue, but sometimes it is no longer possible to click on the rectangle after dismissing the modal card. Sometimes it works and sometimes I have to move the pointer and click elsewhere in the scene before trying again.

I’ve tried marking the ADT and the controls as dirty, but that didn’t help. I’ve also tried setting focusedControl to another control or to null.

Is there some other way to force a complete reset of the texture? Or a way to manually drop hover and focus from the rectangle?

You may be able to see the issue for yourself here. Click on the large rectangle with the description, then dismiss the modal that appears. Try it several times to see if it happens to you.
(edited link to Lab 047)

Hello! Are you able to isolate the issue on the Playground? It will be easier to see what’s going on. I tried interacting with the example page, but I’m not seeing anything to dismiss the page that appears when I click one of the examples:

Something that may work for your situation is simulating a pointer event with pick: Babylon.js/packages/dev/gui/src/2D/advancedDynamicTexture.ts at master · BabylonJS/Babylon.js (

Sorry, it looks like my link to the scene was wrong. It looks like you ended up at the lab template scene, but the problem is in Lab 047.

I haven’t tried to reproduce this on a playground yet as it would involve significant modification of the code.

Oh thanks for the link! Can you try setting the modal’s isPickable property to false when you close it? This should allow the pick events to pass through it and hit the back plane.

You pointed me in the right direction. isPickable should not be needed because the modal is supposed to be behind the card when it’s not active. The two cards are supposed to be switching positions. There was an error in my animation code that was placing the non-active modal card into the same z position of the active main card.

So that solves the picking issue, but the other issue remains.

When I click the rectangle on the main card, it still holds onto the hover state. When the modal card appears in front of the main, the onPointerOutObservable from the main card rectangle never fires, leaving the control in a hovered state.

On the rectangle, is there a way to call or force the onPointerOutObservable to run? Or a reliable way to “reset” the texture to its base state? I’ve tried markAsDirty() which doesn’t seem to do anything any more. That used to be my go-to method to reset an Advanced Dynamic Texture.

You can make an observable fire by calling observable.notifyObservers(), so something like: edff | Babylon.js Playground ( would work for you?

Ah! That is perfect! I didn’t know about notifyObservers. Thank you for all your help :blush:

1 Like

Thanks again for the help on this @carolhmj

I just published this lab if you want to see it in action.


That works pretty well. GJ :+1:

1 Like

Yes, it looks very nice! :smiley: