react-focus-lock breaks password managers' autofill features

[juliacarbajal]

Hi, I'm a software engineer working on a password manager application. We recently received a complaint from a user who couldn't use our autofill features properly on ticketmaster.com. Upon investigation it seems their login form uses the react-focus-lock package, so when the user tries to interact with our autofill webcards, the focus moves immediately back to the login form. I was wondering if there is any workaround to the focus lock that we could use? If not, is this something you might consider including as a feature in the future? For clarification: our autofill displays webcards to let the user choose a credential to autofill with and they sometimes need to type something in it (it's the typing part that doesn't work). These webcards live inside an iframe that is appended at the end of the html, so it's always outside of the focus-locked form. Thanks a lot in advance!

[theKashey]

👋 hello Julia. This is another reminder how bad I am with the documentation 😭

Anyway - your issue seems to be quite close to #213. Here what you can do:

• add data-no-focus-lock on your iframe (documented at https://github.com/theKashey/focus-lock#focus-fighting), this will focus operations within marked location without triggering the lock.
• as you might note - this attribute is quite specific to focus-lock library, so I might propose a little more complicated solution. But I am really not sure if you able to use it or not - "focus fighting"

The idea is following

• when you want to display your experience - focus it, I hope you already doing that following a11y guidelines.
• focus-lock will steal your focus back
• so you focus it again :)
• focus-lock will surrender - https://github.com/theKashey/focus-lock/blob/master/src/setFocus.ts#L55

This is not something ease to implement:

• you need to add blur event to your iframe
  • focus iframe onblur
• focus iframe
  • focus-lock will steal focus
  • onblur event will put it back
  • focus-lock will detect focus-fighting and self-disable
• remove onblur event

---

This is all I can help with. Good luck.

[juliacarbajal]

Hi, thanks a lot for the advice! It seems the data-no-focus-lock only works if we add the package to our repo, which is sadly not an option so I'll see if I can do the focus fighting. Thanks again!

[theKashey]

data-no-focus-lock is an html attribute and does not need anything except it to be added. No javascript should be involved at all.

[juliacarbajal]

Oh uhm then for some reason it's not working (I tried adding this attribute to our iframe but it didn't fix the problem).

[juliacarbajal]

Looking at the source code, it would seem this attribute is saved in a constant called FOCUS_ALLOW which is only used inside a function called focusIsHidden, but I couldn't find anywhere in the code (except tests) where this function was used. If it's not too much to ask, could you double-check that you're actually using this function somewhere? I'm trying to understand why it's not working for us. Thanks again!

[theKashey]

Correct. And later it used in react-focus-lock as const isFreeFocus = () => focusOnBody() || focusIsHidden(); which is later used in a little complicated condition - https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L100

It's more that possible that you trigger other parts of it. That would be interesting to know what exactly is happening, but there is only one way it should work – if as per documentation and my own understanding no-focus-lock means no-focus-lock, then it should be so.

I'll correct code.

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.