Pin component global onBlur event

[golden iris]

How can we integrate global onBlur event for Pin component? If I am assigning onBlur props, it is getting called on each input change, as onBlur applies on each of pin inputs. I want a global onBlur event that only gets called if user focus out of the Pin component.

[modest narwhal]

How this should be implemented?

[golden iris]

There should be a blur event which does not trigger on change of the Pin inputs. means if focus is still within the Pin component, the blur event should not get called. It should be called if focus moves out of the Pin component. Can we integrate something like that?

[modest narwhal]

I understand how it should work, I’ve asked how do you propose to implement that

[golden iris]

Can we use something like below?
<Group
ref={rootRef}
onBlur={(e) => {
if( !rootRef.current.contains(e.relatedTarget)) {
others.onBlur();
}
}}
>
<Input />
</Group>

If relatedTarget is outside of the rootRef, then we can call the blur! What do you suggest?

[modest narwhal]

This can be easily implemented on your side by wrapping PinInput with a div

[golden iris]

Yes. I can integrate that on my end manually for validation with workaround. Just the issue is validateInputOnBlur: true is getting triggered on change as well even if validateInputOnChange: false is set in useForm hook, which seems little confusing to me!