[fix] Avoid setting focus tabIndex on <body>

s77rt · necolas · commit 77f6fba03d85 · 2023-01-25T13:58:53.000-08:00
Also don't modify the tabIndex on contenteditable elements when using programmatic focus APIs. Fix #2473 Close #2468
diff --git a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
@@ -44,6 +44,19 @@ describe('apis/UIManager', () => {
         expect(node.getAttribute('tabIndex')).toBeNull();
       });
     });
+
+    test('doesn\'t set tabIndex="-1" in other cases', () => {
+      // on body
+      UIManager.focus(document.body);
+      expect(document.body.getAttribute('tabIndex')).toBeNull();
+
+      // on contenteditable elements
+      const div = document.createElement('div');
+      div.contentEditable = 'true';
+      div.isContentEditable = true; // jsdom doesn't support this API yet (https://github.com/jsdom/jsdom/issues/1670)
+      UIManager.focus(div);
+      expect(div.getAttribute('tabIndex')).toBeNull();
+    });
   });
 
   describe('updateView', () => {
diff --git a/packages/react-native-web/src/exports/UIManager/index.js b/packages/react-native-web/src/exports/UIManager/index.js
@@ -33,8 +33,9 @@ const measureLayout = (node, relativeToNativeNode, callback) => {
   }
 };
 
-const focusableElements = {
+const elementsToIgnore = {
   A: true,
+  BODY: true,
   INPUT: true,
   SELECT: true,
   TEXTAREA: true
@@ -51,11 +52,12 @@ const UIManager = {
     try {
       const name = node.nodeName;
       // A tabIndex of -1 allows element to be programmatically focused but
-      // prevents keyboard focus, so we don't want to set the value on elements
-      // that support keyboard focus by default.
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
       if (
         node.getAttribute('tabIndex') == null &&
-        focusableElements[name] == null
+        node.isContentEditable !== true &&
+        elementsToIgnore[name] == null
       ) {
         node.setAttribute('tabIndex', '-1');
       }
