ScrollRect control ignores Canvas Group Interactable property?

Questions & Answers
1

Hello,

I am struggling with control schematics regarding my UI.
I am building an RPG game with an inventory system. Inventory itself works beautifully.

I want to have the “Inspect” screen, invokable from Inventory, something like in Borderlands that enables you to inspect a weapon in detail - it’s basically overlay over Inventory.

I would like for Inventory to be visible behind the inspect screen, but problem is that ScrollRect and GridLayout components underneath are still reacting to my mouse clicks and drags, even though the entire Inventory panel is under a gameobject which has CanvasGroup, and disabled Interactable property (when Inspect screen is active.

Example:
Inventory alone:
alt text

With Inspect screen invoked I can still scroll the inventory behind it:
alt text

And I can still drag’n’drop inventory items:
alt text

Now to be fair, I cannot click the buttons on the inventory, so that part is working, but why is there still control on ScrollRect, and drag events?

How do I display a full canvas BUT disable it’s interactivity?

To be noted, the Inspect screen is entire seperate canvas and camera setup. Should I perhaps make Inspect screen a child of Inventory screen, and have it block raycasts? Would that disable the Inventory interactivity?

2

I managed to fix this.

To disable complete control at Inventory screen while Inspect screen is active, I need to not only turn off Interactable property, but Blocks Raycasts property of the Canvas Group as well :confused:

So in short, add Canvas Group Component to the Canvas that needs total control disable, and within a script do whatever your equivalent of this is (somewhere within an event, or single-fire function, do not fetch components within Update loop needlessly):

if (InspectScreenScript.Instance.isInspectControlSchematic)
            {
                InventoryPanel.GetComponentInChildren<CanvasGroup>().interactable = false;
                InventoryPanel.GetComponentInChildren<CanvasGroup>().blocksRaycasts = false;
                print("Inventory control offline");
            }
            else
            {
                InventoryPanel.GetComponentInChildren<CanvasGroup>().interactable = true;
                InventoryPanel.GetComponentInChildren<CanvasGroup>().blocksRaycasts = true;
                print("Restoring inventory control");
            }