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 index 6d547607..8f29fa3f 100644 --- 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 index 15e96dea..8833347b 100644 --- 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'); }