Allow to interact on some outside elements about focus-trap HOT 6 CLOSED

This is how I used that with KendoUI:

focusTrap(myPopup, {
  includeOutsideElement (element) {
     return !!element.closest('.k-animation-container') // all KendoUI pickers have this class
  }
})

from focus-trap.

Hello @gejgalis. I have a question: When a DatePicker opens, shouldn't focus be able to enter that picker? If includeOutsideElement only allows clicks in the outside element, you can't get to the outside element by tabbing, right?

If you agree that we may want to allow focus to move between the elements (the original form and the displaced DatePicker), maybe the solution is to allow focus trap to accept multiple elements?

from focus-trap.

Hello @davidtheclark . Kendo pickers prevents mousedown event, so you can't jump with focus from date input to date picker - you can only use a mouse to choose a day, so focus always stays in date input. See date picker demo

Allowing multiple elements upfront as one logical trap container is not always possible (using HTMLElement reference), because some of those elements are created dynamically after click. It would be only possible by configuring string selector (not HTMLElement reference). If you are OK with that - it will work for me too.

from focus-trap.

@davidtheclark you want me to prepare PR for multiple targets?

from focus-trap.

@gejgalis Sorry for the delayed answer here. If you're still interested in trying to add this feature, I'm open to a PR.

from focus-trap.

This is certainly an edge case and nobody has yet finished a PR with a workable API. So I'm going to close this issue for now. If you are invested in this use case and want to work out the details with me, please open a new issue.

from focus-trap.