<p>Utility component that locks focus inside the component.</p>


If <code>true</code>, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any focus trap children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers.

If <code>true</code>, the focus trap will not prevent focus from leaving the focus trap while open.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers.

If <code>true</code>, the focus trap will not restore focus to previously focused element once focus trap is hidden or unmounted.

Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the &quot;tabbable&quot; npm dependency.

This prop extends the <code>open</code> prop. It allows to toggle the open state without having to wait for a rerender when changing the <code>open</code> prop. This prop should be memoized. It can be used to support multiple focus trap mounted at the same time.

名稱	類型	預設值	描述
open*	bool	-	若 `true`，則焦點會被鎖定。
children	element	-	單一子內容元素。此需要能夠持有 ref。
disableAutoFocus	bool	false	若 `true`，焦點陷阱在開啟時將不會自動將焦點轉移到自身，並在關閉時將焦點恢復到最後一個聚焦的元素。這也適用於任何具有 `disableAutoFocus` 屬性的焦點陷阱子元件。一般來說，永遠不應將此設定為 `true`，因為這會使焦點陷阱對輔助技術（如螢幕閱讀器）的可訪問性降低。
disableEnforceFocus	bool	false	若 `true`，焦點陷阱將不會阻止焦點在開啟時離開焦點陷阱。一般來說，永遠不應將此設定為 `true`，因為這會使焦點陷阱對輔助技術（如螢幕閱讀器）的可訪問性降低。
disableRestoreFocus	bool	false	若 `true`，焦點陷阱在隱藏或卸載後，將不會將焦點恢復到先前聚焦的元素。
getTabbable	func	-	傳回根元素內已排序的可 Tab 節點陣列（即 Tab 順序）。例如，您可以提供 "tabbable" npm 依賴項。簽名：`function(root: HTMLElement) => void`
isEnabled	func	function defaultIsEnabled(): boolean { return true; }	此屬性擴展了 `open` 屬性。它允許在更改 `open` 屬性時，無需等待重新渲染即可切換開啟狀態。此屬性應被記憶化。它可用於支援同時掛載多個焦點陷阱。

Focus Trap

FocusTrap API

Import

Props