Retrieving focus/blur across hundreds of components?

💬 App Building
1

I am developing a tool to help clients auto generate a large document. Each component asks for an input that then gets used to render a bit of text in a number of text components that are in my "Preview" pane.

What I would like to do is use the tag to highlight the portion of the text that is being affected when a component is in focus.

The only way I can figure how to do this is to create a variable (e.g., varComponentInFocus) and then create two event handlers (on Focus, set varComponentInFocus to {{self.id}} and on Blur, reset the variable). Then in my text element, I wrap the tag in a conditional statement.

It works, but I have over 100 fields. Is there any more efficient way to do this?

Here's an example of what I'm trying to accomplish (Project Information is a container holding a form and Section Preview is a container with multiple text display components):

image
image1057×127 21 KB

1 Like
2

Hi @rcurley55! Welcome back to the community. :slightly_smiling_face:

I played around with a few different ideas, but kept coming back to a solution that sounds similar to what you've already implemented. Without a way to easily tell which element is in focus, you pretty much have to define the two event handlers on every input. It probably won't be super helpful, but you can check out my implementation here (83.6 KB).

I do think it makes sense to expose a focused attribute on text inputs, though. :thinking: I'll talk to the team to see what they think and provide an update here as soon as I can!

3

Thanks @Darren - that sample is very helpful. Do you have any suggestions on how to implement this across 100 components split across 10 forms?

I was thinking I could use your example on each form, which would make things a little more efficient, but I'm open to other suggestions.

I really wish there was an easy way to edit the json in a text editor so that I could then re-import the json to include all of the events.

4

And exposing focused would solve all of my problems!

5

I think this is feasible! I'll let you know if I think of a better option. :+1:

I don't necessary recommend it, but editing a Toolscript file is generally a lot more intuitive if you want to give that a shot.