Skip to content

Commit c42990f

Browse files
authored
Fix usePress so it doesnt preventDefault when taps happen on non plain text content (#7190)
1 parent db60bab commit c42990f

File tree

2 files changed

+30
-2
lines changed

2 files changed

+30
-2
lines changed

packages/@react-aria/interactions/src/usePress.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -527,7 +527,7 @@ export function usePress(props: PressHookProps): PressResult {
527527
// https://github.com/facebook/react/issues/9809
528528
let onTouchEnd = (e: TouchEvent) => {
529529
// Don't preventDefault if we actually want the default (e.g. submit/link click).
530-
if (shouldPreventDefaultUp(e.target as Element)) {
530+
if (shouldPreventDefaultUp(e.currentTarget as Element)) {
531531
e.preventDefault();
532532
}
533533
};
@@ -942,7 +942,7 @@ function shouldPreventDefaultUp(target: Element) {
942942
if (target instanceof HTMLInputElement) {
943943
return false;
944944
}
945-
945+
946946
if (target instanceof HTMLButtonElement) {
947947
return target.type !== 'submit' && target.type !== 'reset';
948948
}

packages/@react-aria/interactions/stories/usePress.stories.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
import {Link} from 'react-aria-components';
1314
import React from 'react';
1415
import styles from './usePress-stories.css';
1516
import {usePress} from '@react-aria/interactions';
@@ -84,3 +85,30 @@ function OnPress(props) {
8485
</div>
8586
);
8687
}
88+
89+
export const linkOnPress = {
90+
render: () => (
91+
<div className={styles['outer-div']}>
92+
{/* Note that the svg needs to not have pointer-events: none */}
93+
<Link href="http://adobe.com" target="_blank">
94+
<svg
95+
role="img"
96+
viewBox="0 0 24 24"
97+
xmlns="http://www.w3.org/2000/svg"
98+
style={{
99+
height: '2rem',
100+
width: '2rem',
101+
fill: 'red'
102+
}}>
103+
<title>Adobe</title>
104+
<path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
105+
</svg>
106+
</Link>
107+
</div>
108+
),
109+
parameters: {
110+
description: {
111+
data: 'Pressing on the link should always open a new tab. This tests specifically that usePress doesnt erroneously prevent default, especially on mobile'
112+
}
113+
}
114+
};

0 commit comments

Comments
 (0)