trapfocus logic update (#4100)

UNRELEASED.md

@@ -17,6 +17,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Removed the `isMounted` check from `Portal` to only rely on the useEffect for calling `onPortalCreated` ([#4066](https://github.com/Shopify/polaris-react/pull/4066))
 - Removed transition from `BulkActions` to eliminate flicker ([#4080](https://github.com/Shopify/polaris-react/pulls/4080))
 - update error background color in `Select` ([#4089](https://github.com/Shopify/polaris-react/pull/4089))
+- Fixed `Trapfocus` issue that was preventing tabbing with react forms ([#4100](https://github.com/Shopify/polaris-react/pull/4100))
 
 ### Documentation
 

src/components/TrapFocus/TrapFocus.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useEffect, useState} from 'react';
 
 import {Key} from '../../types';
 import {EventListener} from '../EventListener';
@@ -13,7 +13,6 @@ import {
 } from '../../utilities/focus';
 import {useFocusManager} from '../../utilities/focus-manager';
 import {portal} from '../shared';
-import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount';
 
 export interface TrapFocusProps {
   trapping?: boolean;
@@ -23,17 +22,20 @@ export interface TrapFocusProps {
 export function TrapFocus({trapping = true, children}: TrapFocusProps) {
   const {canSafelyFocus} = useFocusManager({trapping});
   const focusTrapWrapper = useRef<HTMLDivElement>(null);
-  const isMounted = useIsAfterInitialMount();
+  const [disableFocus, setDisableFocus] = useState(true);
 
-  const disableFocus =
-    isMounted &&
-    canSafelyFocus &&
-    !(
-      focusTrapWrapper.current &&
-      focusTrapWrapper.current.contains(document.activeElement)
-    )
-      ? !trapping
-      : true;
+  useEffect(() => {
+    const disable =
+      canSafelyFocus &&
+      !(
+        focusTrapWrapper.current &&
+        focusTrapWrapper.current.contains(document.activeElement)
+      )
+        ? !trapping
+        : true;
+
+    setDisableFocus(disable);
+  }, [canSafelyFocus, trapping]);
 
   const handleFocusIn = (event: FocusEvent) => {
     const containerContentsHaveFocus =