diff --git a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx
index dd0f1b10e0..c384b9da2b 100644
--- a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { View, ScrollView, Pressable } from 'react-native';
+import { View, ScrollView, Pressable, TextInput } from 'react-native';
import type { FocusZoneDirection, FocusZoneTabNavigation } from '@fluentui/react-native';
import { FocusZone, MenuButton, Text, useOnPressWithFocus } from '@fluentui/react-native';
@@ -207,6 +207,19 @@ const FocusZoneGrid: React.FunctionComponent = () => {
);
};
+const FocusZoneTextInput: React.FunctionComponent = () => {
+ return (
+
+ <>
+ FocusZone Grid
+
+
+
+ >
+
+ );
+};
+
const focusZoneSections: TestSection[] = [
{
name: 'Common FocusZone Usage',
@@ -245,6 +258,10 @@ const focusZoneSections: TestSection[] = [
name: 'FocusZone Grid',
component: FocusZoneGrid,
},
+ {
+ name: 'FocusZone with TextInput',
+ component: FocusZoneTextInput,
+ },
];
const e2eSections: TestSection[] = [
diff --git a/change/@fluentui-react-native-focus-zone-d859c102-4cb7-4d68-8107-d1bbfeb76759.json b/change/@fluentui-react-native-focus-zone-d859c102-4cb7-4d68-8107-d1bbfeb76759.json
new file mode 100644
index 0000000000..dc64e88d49
--- /dev/null
+++ b/change/@fluentui-react-native-focus-zone-d859c102-4cb7-4d68-8107-d1bbfeb76759.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Fix TextInput focus when inside a FocusZone",
+ "packageName": "@fluentui-react-native/focus-zone",
+ "email": "nakambo@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-3f2249ed-41c7-43f3-8b5e-5955e1e06001.json b/change/@fluentui-react-native-tester-3f2249ed-41c7-43f3-8b5e-5955e1e06001.json
new file mode 100644
index 0000000000..217e201c8a
--- /dev/null
+++ b/change/@fluentui-react-native-tester-3f2249ed-41c7-43f3-8b5e-5955e1e06001.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Add TextInput inside FocusZone case",
+ "packageName": "@fluentui-react-native/tester",
+ "email": "nakambo@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/components/FocusZone/macos/RCTFocusZone.m b/packages/components/FocusZone/macos/RCTFocusZone.m
index 45ec1c1382..5aea248535 100644
--- a/packages/components/FocusZone/macos/RCTFocusZone.m
+++ b/packages/components/FocusZone/macos/RCTFocusZone.m
@@ -1,4 +1,5 @@
#import "KeyCodes.h"
+#import
#import "RCTFocusZone.h"
#import "RCTi18nUtil.h"
@@ -61,7 +62,14 @@ static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSP
for (NSView *view in [parentView subviews]) {
if ([view acceptsFirstResponder]) {
- return view;
+ if ([view isKindOfClass:[RCTBaseTextInputView class]]) {
+ RCTUIView *backedTextInputView = [(RCTBaseTextInputView *)view backedTextInputView];
+ if ([backedTextInputView acceptsFirstResponder]) {
+ return backedTextInputView;
+ }
+ } else {
+ return view;
+ }
}
NSView *match = GetFirstFocusableViewWithin(view);