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);