Clear and concise description of the problem

Summary

The focus-trap library provides a useful trap.updateContainerElements() method, allowing consumers to update the container elements of a focus trap without needing to destroy and recreate it. This is especially helpful in dynamic UIs where the trap boundaries may change during the component lifecycle.

Thank you for considering this enhancement!

Use Case

In applications where the content within a modal, drawer, or any focus-trapped container changes (e.g., conditional rendering, dynamic portals), being able to manually update the container elements is essential to maintain correct focus behavior.

Suggested solution

Expose the updateContainerElements method via the useFocusTrap hook so users can call it directly when needed. https://github.com/focus-trap/focus-trap?tab=readme-ov-file#trapupdatecontainerelements

Suggested API

const { activate, deactivate, updateContainerElements } = useFocusTrap(ref, options);

Alternative

Currently, developers must recreate the trap if they need to update the container elements, which is not efficient and can lead to undesirable side effects.

Additional context

Benefits

• Aligns useFocusTrap closer to the full capabilities of the underlying focus-trap library.
• Reduces boilerplate and avoids unnecessary unmounting/mounting cycles.
• Improves accessibility in dynamic content scenarios.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.