ReactUnity/core

[BUG] UI Toolkit `:active` does not work

Closed this issue · 2 comments

How to reproduce

.backButton {
    margin: 0;
    border: none;

    &:hover {
      background-color: red;
    }
    &:active {
      background-color: yellow;
    }
  }

The button's background does not turn yellow when it is in active state.

active-does-not-work.mp4

I solved this issue by registering the callback in TrickleDown.TrickleDown mode in ActiveStateHandler. See Unity Forum https://forum.unity.com/threads/pointerdownevent-on-buttons-not-working.1211238/#post-7734288

protected override void RegisterCallbacksOnTarget()
{
    target.RegisterCallback<MouseDownEvent>(OnPointerDown,
            target is Button ? TrickleDown.TrickleDown : TrickleDown.NoTrickleDown);
    target.RegisterCallback<MouseUpEvent>(OnPointerUp);
}

protected override void UnregisterCallbacksFromTarget()
{
    target.UnregisterCallback<MouseDownEvent>(OnPointerDown,
            target is Button ? TrickleDown.TrickleDown : TrickleDown.NoTrickleDown);
    target.UnregisterCallback<MouseUpEvent>(OnPointerUp);
}
after-add-trickle-down.mp4

Thanks for the fix. Some people in Unity Forum report it still doesn't work for them so I will try to test and see if that is the case.