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

**URL:** <https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519>\
**Category:** How do I?\
**Created:** [May 8, 2024, 6:22pm UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519 "2024-05-08T18:22:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jack](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jack/32/5915_2.png) [@Jack](https://community.weweb.io/u/Jack)\
**Post date:** [May 8, 2024, 6:22pm UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/1 "2024-05-08T18:22:16Z")

</div>

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.

> [@How to trigger a focus state on elements that currently lack this capability](https://community.weweb.io/t/how-to-trigger-a-focus-state-on-elements-that-currently-lack-this-capability/7972):
>
> Hello! I’m interested in enabling a focus state for elements such as the date picker or dropdown menu. Essentially, I want to modify the styles of these elements when they are clicked by the user. After a selection is made, either choosing a date or an option from the dropdown, they should revert to their original appearance. Is there a method to achieve this? Thanks in advance

Thanks in advance!  
Jack

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f08540733046c7631a49e7dcc72aab728cc55280.jpeg)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [May 8, 2024, 6:29pm UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/2 "2024-05-08T18:29:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stevedesignerd](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/stevedesignerd/32/8487_2.png) [@stevedesignerd](https://community.weweb.io/u/stevedesignerd)\
**Post date:** [May 10, 2024, 3:40am UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/3 "2024-05-10T03:40:58Z")

</div>

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 😕

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [August 13, 2024, 2:57am UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/4 "2024-08-13T02:57:44Z")

</div>

Bumping this for the mask input 👀

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?

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

```

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [August 13, 2024, 4:02am UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/5 "2024-08-13T04:02:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [August 13, 2024, 4:15am UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/6 "2024-08-13T04:15:44Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [August 14, 2024, 6:17am UTC](https://community.weweb.io/t/currently-no-focus-state-for-the-mask-input-how-to-create-one-with-a-formula/8519/7 "2024-08-14T06:17:30Z")

</div>

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. 😄