Forums | NoesisGUI

Hi Dorian, it was nice meeting you the other day!

I'm working on a search box UI. I have a vector magnifying glass on the top row of my scene. When I click it (mouseDown), I have the text box animating open. Super cool. But I've noticed when the search box is invisible, it's being detected in the mouseEnter state. Do you know how to keep something that's supposed to be invisible yet part of the button construction, to be inactive and not register in the mouseEnter state?

Thanks for your help, -Jeremy

Hi Jeremy! Great to hear from you again, and was an absolute pleasure to get to meet you as well!

With what you're describing, I'm visualising something like the below:

So you have your Clickable Magnifying Glass:


And then when you click on it, the input field pops in below it:


With what you're describing here, my first instinct would be to leverage the Text Search Input Field's "Hit Test Visible" Property to make it not capture input until its displayed.

So to achieve this, in the Element responsible for displaying the Text Search Input Field, navigate to its Properties, search for "Hit", and you'll see it appear, like so:


This Property is the one that can be checked on/off to either allow or disallow hit detection on it.

So the thing, is that of course, you don't want this Text Search Input Field to always be "Unhittable" because if not you won't be able to actually interact with it to input your text once you display it.

So to account for all this, and make it all work, you can change the IsHitTestVisible Property in a EventTrigger, so that the following happens:

1) By Default (not in the Trigger): The Text Search Input Field is Visibility=Hidden, and HitTestVisible=False.

2) When you press on the Magnifying Glass (what happens in the Trigger): The Text Search Input Field becomes Visibility= Visible, and HitTestVisible=True.

This will look something like this in Studio:


And that's essentially the essence of the mechanics!

I'll also attach the file I made to demonstrate this so you can take a look. (I took a slightly different approach, using a CheckBox Element as a Toggle to show/hide the Text Search Input Field, but the concepts around HitTestVisibility still apply.)

Let us know if this resolves things for you! If not we can continue to diagnose! :)

- Dorian

Thanks Dorian! You helped me solve that problem and I went a little further to change the look of the button to match my UI. Much appreciated! See attached .mp4 -Jeremy

Amazing news, Jeremy! So glad that worked out!
(and love the video by the way 😁)