Widget interaction and button hover state

Hi,
I’m trying to get my pause menu with button to work with widget interaction, but I’m having problems with buttons and their hover states. My widget is a simple 3d widget component which has its visibility toggled when pausing/unpausing. This causes a problem if a button is in a hovered state when the component gets hidden - the state persists after the component is shown again. Only when I point at the button and move away, the state gets reset to normal. Can I somehow force buttons to update their state to normal after making them visible?

Hey there @Pete_the_B! So the button state system isn’t really exposed so you’d have to make code changes to the buttons states directly. It’s a workaround but might be easier if the unpause event plays to then change the button’s style. As long as you aren’t use gamepads and require correct feedback with the focused system it shouldn’t be a problem.

Thanks - I’ve tried implementing this workaround, but unfortunately, I’ve run into more problems. Currently, I’m trying to set normal style for hovered state when the button is pressed and the game unpaused, and revert the hover style on first hover:

This has one problem - the hovered style is not set when the widget is shown again and the button gets pointed at, because it still thinks it’s in hovered state, so the On Hover event doesn’t fire. I have to point away from the button and back again to let it trigger.

Hrm, so OnHover doesn’t fire again, but does On Mouse Enter fire? If so you could use that to set the style back to normal.
image

I was trying to dig up a project where I did something similar but I can’t remember which it was!

A complete shot in the dark - have you tried disabling and re-enabling the button in addition to the visibility change - perhaps that would reset its state?

image

Unfortunately, it doesn’t help.

This creates another issue - whenever I point at the widget, but not at the button, the on mouse enter event fires and the button shows the hovered style again, since it still thinks it’s hovered over. I would need to somehow reset that state, so we’re back at the original problem. Unless there’s a way to handle mouse enter only for this button.

Hrm, so I guess our options are to edit the Slate script where the state system is or do something a bit more hacky. The final shot, is does the button call unhover if you change the position of the button?

No - changing position or invalidating the widget doesn’t help. Looks like it wants to wait for the mouse to leave anyway.

Sorry about that! I’m going to have to do a bit of research on the state system to recommend how you can modify it directly.

I am having this same issue, did you ever find a workaround? the “is hovered” function will not update its state after an on drop event, only once the mouse is hovered again will it update.

Unfortunately no. Haven’t checked 5.1 yet, but in 5.0 there doesn’t seem to be a workaround.

Hello !
Well, I got exactly the same issue.
Tried a couple of stuff (volatile, find the widget path, redraw etc …).
Couldn’t find a solution.

Anyone has an update on this ?

Thanks in advance

Hello, I ran into the same issue and was able to find a workaround using a hack. I set the widget interaction distance to 0 with a small delay to remove the hover state from the menu before hiding it.

Then I reset the interaction distance when bringing up the pause menu. It’s pretty ugly, but it’s the only solution I’ve found that works.

3 Likes

So I ran into this issue and actually managed to solve it. As everyone else has stated, the code to manipulate the buttons is not exposed fully so for us blueprint users there is no way to manipulate it.

The problem:
when a button is pressed it seems to stay in a “on hovered” state. In my situation I have made a virtual keyboard for a mobile app to use instead of the default android keyboard. When a key is pressed it will activate like normal but remain highlighted as if it was still hovered. The only way to remove the hovered status is to click elsewhere on the screen to deactivate the hover.

Here is en example of the keyboard I was making:
keyboard example

I played with the idea of adding code to make the game click a dedicated part of the screen that did nothing after each button press. This would deactivate the hover state but trying to simulate a click without the user actually clicking the mouse seems to be very difficult an not accessible.

The Solution:
First make a button like normal and then set the visibility of that button to “Not Hit-Testable”. Then make another button that is fully transparent and layer it over the existing button.

Here is the Z button with an invisible button underneath it:
keyboard example 2

This was so I can use the visual representation of the original Z button, but the hitbox would now be bigger using the invisible button.

The blueprint would use the on pressed and on released of the invisible button:

So here I am using the press and release of the invisible button to manually change the colour of the Z button object. If you drag off the button object and search for style, you get a huge struct of variables you can manipulate. As it is a struct, you need to use “set members” to change any info in that struct. So on pressed i make the colour go lighter, on release the colour goes back to normal, then hook it up to what ever actual functionality you need the button to do. The hover state is still technically active on the invisible button but you cant see it.

Hope this helps anyone in the future.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.