zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-02 02:25:22 +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
packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
Vendored
+13
View File
@@ -44,6 +44,19 @@ describe('apis/UIManager', () => {
expect(node.getAttribute('tabIndex')).toBeNull(); 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', () => { describe('updateView', () => {
packages/react-native-web/src/exports/UIManager/index.js
Vendored
+6 -4
View File
@@ -33,8 +33,9 @@ const measureLayout = (node, relativeToNativeNode, callback) => {
} }
}; };
const focusableElements = { const elementsToIgnore = {
A: true, A: true,
BODY: true,
INPUT: true, INPUT: true,
SELECT: true, SELECT: true,
TEXTAREA: true TEXTAREA: true
@@ -51,11 +52,12 @@ const UIManager = {
try { try {
const name = node.nodeName; const name = node.nodeName;
// A tabIndex of -1 allows element to be programmatically focused but // 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 // prevents keyboard focus. We don't want to set the tabindex value on
// that support keyboard focus by default. // elements that should not prevent keyboard focus.
if ( if (
node.getAttribute('tabIndex') == null && node.getAttribute('tabIndex') == null &&
focusableElements[name] == null node.isContentEditable !== true &&
elementsToIgnore[name] == null
) { ) {
node.setAttribute('tabIndex', '-1'); node.setAttribute('tabIndex', '-1');
} }