Revert "Add support for modifying the key view loop (#769)" (#1621)

This reverts commit 14ce7dca84.

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -48,7 +48,6 @@ const UIView = {
   validKeysDown: true,
   validKeysUp: true,
   draggedTypes: true,
-  nextKeyViewTag: true,
   // macOS]
 };
 

Libraries/Components/View/ReactNativeViewViewConfigMacOS.js

@@ -39,7 +39,6 @@ const ReactNativeViewViewConfigMacOS = {
     accessibilityTraits: true,
     draggedTypes: true,
     enableFocusRing: true,
-    nextKeyViewTag: true,
     onBlur: true,
     onClick: true,
     onDoubleClick: true,

Libraries/Components/View/ViewPropTypes.js

@@ -438,13 +438,6 @@ type MacOSViewProps = $ReadOnly<{|
    */
   acceptsFirstMouse?: ?boolean,
 
-  /**
-   * The react tag of the view that follows the current view in the key view loop.
-   *
-   * @platform macos
-   */
-  nextKeyViewTag?: ?number,
-
   /**
    * Specifies whether focus ring should be drawn when the view has the first responder status.
    *

Libraries/NativeComponent/PlatformBaseViewConfig.js

@@ -509,7 +509,6 @@ const PlatformBaseViewConfig: PartialViewConfigWithoutName =
             cursor: true,
             draggedTypes: true,
             enableFocusRing: true,
-            nextKeyViewTag: true,
             tooltip: true,
             validKeysDown: true,
             validKeysUp: true,

React/Views/RCTViewManager.m

@@ -14,7 +14,6 @@
 #import "RCTConvert.h"
 #import "RCTLog.h"
 #import "RCTShadowView.h"
-#import "RCTSinglelineTextInputView.h" // [macOS]
 #import "RCTUIManager.h"
 #import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"
@@ -498,36 +497,6 @@ RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock) // macOS keyboard event
 RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock) // macOS keyboard events
 RCT_EXPORT_VIEW_PROPERTY(validKeysDown, NSArray<NSString*>)
 RCT_EXPORT_VIEW_PROPERTY(validKeysUp, NSArray<NSString*>)
-RCT_CUSTOM_VIEW_PROPERTY(nextKeyViewTag, NSNumber, RCTView)
-{
-  NSNumber *nextKeyViewTag = [RCTConvert NSNumber:json];
-
-  RCTUIManager *uiManager = [[self bridge] uiManager];
-  NSView *nextKeyView = [uiManager viewForReactTag:nextKeyViewTag];
-    if (nextKeyView) {
-      NSView *targetView = view;
-      // The TextInput component is implemented as a RCTUITextField wrapped by a RCTSinglelineTextInputView,
-      // so we need to get the first subview to properly transfer focus
-      if ([targetView isKindOfClass:[RCTSinglelineTextInputView class]]) {
-        targetView = [[view subviews] firstObject];
-      }
-      if ([nextKeyView isKindOfClass:[RCTSinglelineTextInputView class]]) {
-        nextKeyView = [[nextKeyView subviews] firstObject];
-      }
-      [targetView setNextKeyView:nextKeyView];
-    }
-}
-
-RCT_EXPORT_METHOD(recalculateKeyViewLoop: (nonnull NSNumber *)reactTag)
-{
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTUIView *> *viewRegistry) {
-    RCTUIView *view = viewRegistry[reactTag];
-    if (!view) {
-      RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
-    }
-    [[view window] recalculateKeyViewLoop];
-  }];
-}
 #endif // macOS]
 
 #pragma mark - ShadowView properties

packages/rn-tester/js/examples/KeyViewLoopExample/KeyViewLoopExample.js

@@ -1,153 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict'; // [macOS]
-
-const React = require('react');
-const ReactNative = require('react-native');
-import {Platform} from 'react-native';
-const {Text, View, Button, TextInput, StyleSheet, findNodeHandle} = ReactNative;
-
-class KeyViewLoopExample extends React.Component<{}> {
-  firstViewRef = React.createRef();
-  secondViewRef = React.createRef();
-  thirdViewRef = React.createRef();
-  fourthViewRef = React.createRef();
-
-  render() {
-    return (
-      <View>
-        <Text>
-          Key-view loops allow custom control of keyboard accessibility to
-          navigate between controls.
-        </Text>
-        <View>
-          {Platform.OS === 'macos' ? (
-            <View>
-              <View
-                style={styles.keyView}
-                focusable={true}
-                ref={this.firstViewRef}
-                onFocus={() => {
-                  this.firstViewRef.current?.setNativeProps({
-                    nextKeyViewTag: findNodeHandle(this.secondViewRef.current),
-                  });
-                }}>
-                <Text>First View</Text>
-              </View>
-              <View
-                style={styles.keyView}
-                focusable={true}
-                ref={this.thirdViewRef}
-                onFocus={() => {
-                  this.thirdViewRef.current?.setNativeProps({
-                    nextKeyViewTag: findNodeHandle(this.fourthViewRef.current),
-                  });
-                }}>
-                <Text>Third View</Text>
-              </View>
-              <View
-                style={styles.keyView}
-                focusable={true}
-                ref={this.secondViewRef}
-                onFocus={() => {
-                  this.secondViewRef.current?.setNativeProps({
-                    nextKeyViewTag: findNodeHandle(this.thirdViewRef.current),
-                  });
-                }}>
-                <Text>Second View</Text>
-              </View>
-              <Button
-                title={'Button cannot set nextKeyViewTag'}
-                ref={this.fourthViewRef}
-                onPress={() => {}}
-              />
-            </View>
-          ) : null}
-        </View>
-      </View>
-    );
-  }
-}
-class FocusTrapExample extends React.Component<{}> {
-  trapZoneBeginRef = React.createRef();
-  trapZoneEndRef = React.createRef();
-  render() {
-    return (
-      <View>
-        <Text>Focus trap example.</Text>
-        <TextInput placeholder={'Focusable 1'} style={styles.textInput} />
-        <TextInput placeholder={'Focusable 2'} style={styles.textInput} />
-        <TextInput placeholder={'Focusable 3'} style={styles.textInput} />
-        <Text>Begin focus trap:</Text>
-        <TextInput
-          ref={this.trapZoneBeginRef}
-          placeholder={'Focusable 4'}
-          style={styles.textInput}
-        />
-        <TextInput placeholder={'Focusable 5'} style={styles.textInput} />
-        <TextInput
-          ref={this.trapZoneEndRef}
-          onFocus={() => {
-            this.trapZoneEndRef.current?.setNativeProps({
-              nextKeyViewTag: findNodeHandle(this.trapZoneBeginRef.current),
-            });
-          }}
-          placeholder={'Focusable 6'}
-          style={styles.textInput}
-        />
-        <Text>End focus trap:</Text>
-        <TextInput placeholder={'Focusable 7'} style={styles.textInput} />
-        <TextInput placeholder={'Focusable 8'} style={styles.textInput} />
-      </View>
-    );
-  }
-}
-
-var styles = StyleSheet.create({
-  textInput: {
-    ...Platform.select({
-      macos: {
-        color: {semantic: 'textColor'},
-        backgroundColor: {semantic: 'textBackgroundColor'},
-        borderColor: {semantic: 'gridColor'},
-      },
-      default: {
-        borderColor: '#0f0f0f',
-      },
-    }),
-    borderWidth: StyleSheet.hairlineWidth,
-    flex: 1,
-    fontSize: 13,
-    padding: 4,
-  },
-  keyView: {
-    height: 20,
-    width: 100,
-    margin: 20,
-  },
-});
-
-exports.title = 'Key View Loop';
-exports.description = 'Examples that show how key-view loops can be used.';
-exports.examples = [
-  {
-    title: 'Key View Loop Example',
-    render: function (): React.Element<any> {
-      return <KeyViewLoopExample />;
-    },
-  },
-  {
-    title: 'Focus Trap Example',
-    render: function (): React.Element<any> {
-      return <FocusTrapExample />;
-    },
-  },
-];

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -56,10 +56,6 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'KeyboardEvents',
     module: require('../examples/KeyboardEventsExample/KeyboardEventsExample'),
   },
-  {
-    key: 'Key-View Accessibility Looping',
-    module: require('../examples/KeyViewLoopExample/KeyViewLoopExample'),
-  },
   {
     key: 'AccessibilityShowMenu',
     module: require('../examples/AccessibilityShowMenu/AccessibilityShowMenu'),