[fix] Allow Pressable to be programmatically focused when disabled

Fix #2357
This commit is contained in:
Nicolas Gallagher
2022-08-24 14:39:55 -07:00
parent 3fc40bdf81
commit 107c6eeb46
4 changed files with 28 additions and 18 deletions
+22 -8
View File
@@ -14922,7 +14922,7 @@
}
},
"packages/babel-plugin-react-native-web": {
"version": "0.18.6",
"version": "0.18.7",
"license": "MIT",
"devDependencies": {
"babel-plugin-tester": "^10.1.0"
@@ -14949,12 +14949,18 @@
"webpack-cli": "^4.10.0"
}
},
"packages/benchmarks/node_modules/babel-plugin-react-native-web": {
"version": "0.18.6",
"resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.6.tgz",
"integrity": "sha512-ZLYWYPvQRnAlh6c1H4kt9ShFFDPgnIMlbpCsNg+Hta1KBZMMb9t6SPyhZzpAXn3iY06XOCuZldysIGTDSIOfhg==",
"dev": true
},
"packages/dom-event-testing-library": {
"version": "0.0.0",
"license": "MIT"
},
"packages/react-native-web": {
"version": "0.18.6",
"version": "0.18.7",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.18.6",
@@ -14971,7 +14977,7 @@
}
},
"packages/react-native-web-docs": {
"version": "0.18.6",
"version": "0.18.7",
"devDependencies": {
"@11ty/eleventy": "^1.0.1",
"@11ty/eleventy-navigation": "^0.3.3",
@@ -15035,14 +15041,14 @@
}
},
"packages/react-native-web-examples": {
"version": "0.18.6",
"version": "0.18.7",
"license": "MIT",
"dependencies": {
"babel-plugin-react-native-web": "0.18.6",
"babel-plugin-react-native-web": "0.18.7",
"next": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-web": "0.18.6"
"react-native-web": "0.18.7"
},
"devDependencies": {
"@babel/core": "^7.18.6",
@@ -18138,6 +18144,14 @@
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"babel-plugin-react-native-web": {
"version": "0.18.6",
"resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.6.tgz",
"integrity": "sha512-ZLYWYPvQRnAlh6c1H4kt9ShFFDPgnIMlbpCsNg+Hta1KBZMMb9t6SPyhZzpAXn3iY06XOCuZldysIGTDSIOfhg==",
"dev": true
}
}
},
"big.js": {
@@ -23941,11 +23955,11 @@
"requires": {
"@babel/core": "^7.18.6",
"@babel/preset-flow": "^7.18.6",
"babel-plugin-react-native-web": "0.18.6",
"babel-plugin-react-native-web": "0.18.7",
"next": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-web": "0.18.6"
"react-native-web": "0.18.7"
}
},
"read-pkg": {
@@ -34,6 +34,8 @@ export default function PressablePage() {
delayPressIn={delay}
delayPressOut={delay}
disabled={disabled}
onBlur={handleEvent('onBlur')}
onFocus={handleEvent('onFocus')}
onHoverIn={handleEvent('onHoverIn')}
onHoverOut={handleEvent('onHoverOut')}
onKeyDown={(e) => {
@@ -119,11 +119,11 @@ describe('components/Pressable', () => {
act(() => {
target.focus();
});
expect(onFocus).not.toBeCalled();
expect(onFocus).toBeCalled();
act(() => {
body.focus({ relatedTarget: target.node });
});
expect(onBlur).not.toBeCalled();
expect(onBlur).toBeCalled();
});
test('hover interaction', () => {
+2 -8
View File
@@ -144,9 +144,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
const blurHandler = React.useCallback(
(e) => {
if (disabled) {
return;
}
if (e.nativeEvent.target === hostRef.current) {
setFocused(false);
if (onBlur != null) {
@@ -154,14 +151,11 @@ function Pressable(props: Props, forwardedRef): React.Node {
}
}
},
[disabled, hostRef, setFocused, onBlur]
[hostRef, setFocused, onBlur]
);
const focusHandler = React.useCallback(
(e) => {
if (disabled) {
return;
}
if (e.nativeEvent.target === hostRef.current) {
setFocused(true);
if (onFocus != null) {
@@ -169,7 +163,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
}
}
},
[disabled, hostRef, setFocused, onFocus]
[hostRef, setFocused, onFocus]
);
const contextMenuHandler = React.useCallback(