Currently no 'focus' state for the Mask Input. How to create one with a formula?

Ask us anything How do I?
1

Hi all!

I am using the new Mask Input that WeWeb released recently, but noticed that the ‘focus’ state is not yet supported for this element (it doesn’t show up as a default ‘state’ nor as a trigger in the workflow builder).

Is there a way to create a state and mimic the ‘focus’ behavior via a formula or javascript?

This is similar to this post below that got no engagement.

Thanks in advance!
Jack

image
image2860×1672 272 KB

2

Hey, you might be able to do this via the thisInstance which was added recently to every element as far as I understand. It basically should refer to the HTML of that current element, meaning, that you could hook yourself up to it, and look if the input is focused or not, then you could either use a variable to store the focus state, or directly do whatever you need to do. This would require some JS tinkering tho, in these cases I prefer forking the WeWeb’s component and turning it into a custom code component, but since that’s a paywalled feature, I’d say JS is our best bet here.

3

Hey there I’m still trying to understand a little bit about thisInstance. Do you have any docs or examples on how to use it? I still need to set on focus states in some elements but haven’t find a way to do it :confused:

4

Bumping this for the mask input :eyes:

Wondering how to do it on a component. I have a workflow I’d like to run, but am not really sure why a component workflow set to run onmount is not correctly running the workflow?

wwLib
  .getFrontWindow()
  .addEventListener("focus", () =>
    wwLib.wwWorkflow.executeGlobal("59b35353-5746-4104-9ecf-e9a3cab5623d")
  );
5

It’s probably because reusable components have a different workflow trigger hook, ot’s something along the lines of wwComponent I think.

1 Like
6

Oh shoot, I didn’t realize components had different things. I found a related code piece in the community that ended up working!

wwLib
  .getFrontWindow()
  .addEventListener("focus", () =>
    context.component.methods.executeWorkflow("59b35353-5746-4104-9ecf-e9a3cab5623d")
  );
1 Like
7

Would still like to request that a formal On blur and On focus workflow trigger be added. JS works, but breaks in the editor quite a bit. Would be nice for a more formal solution. :smile: