react-focus-lock breaks password managers' autofill features about react-focus-lock HOT 7 CLOSED

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.

from react-focus-lock.

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

from react-focus-lock.

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!

from react-focus-lock.

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.

from react-focus-lock.

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

from react-focus-lock.

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!

from react-focus-lock.

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.

from react-focus-lock.