zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-13 19:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Avoid setting focus tabIndex on <body>

Browse Source 
Also don't modify the tabIndex on contenteditable elements when using
programmatic focus APIs.

Fix #2473
Close #2468
This commit is contained in:
Abdelhafidh Belalia
2023-01-17 10:14:36 +01:00
committed by Nicolas Gallagher
parent ccfd936f27
commit 77f6fba03d
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/react-native-web/src/exports/UIManager/__tests__/index-test.js vendored
View File

@@ -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', () => {

10
packages/react-native-web/src/exports/UIManager/index.js vendored
View File

@@ -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');
}