Skip to content

Commit

Permalink
Fix usePress so it doesnt preventDefault when taps happen on non plai…
Browse files Browse the repository at this point in the history
…n text content (#7190)
  • Loading branch information
LFDanLu authored Oct 14, 2024
1 parent db60bab commit c42990f
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/@react-aria/interactions/src/usePress.ts
Original file line number Diff line number Diff line change
Expand Up @@ -527,7 +527,7 @@ export function usePress(props: PressHookProps): PressResult {
// https://github.com/facebook/react/issues/9809
let onTouchEnd = (e: TouchEvent) => {
// Don't preventDefault if we actually want the default (e.g. submit/link click).
if (shouldPreventDefaultUp(e.target as Element)) {
if (shouldPreventDefaultUp(e.currentTarget as Element)) {
e.preventDefault();
}
};
Expand Down Expand Up @@ -942,7 +942,7 @@ function shouldPreventDefaultUp(target: Element) {
if (target instanceof HTMLInputElement) {
return false;
}

if (target instanceof HTMLButtonElement) {
return target.type !== 'submit' && target.type !== 'reset';
}
Expand Down
28 changes: 28 additions & 0 deletions packages/@react-aria/interactions/stories/usePress.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* governing permissions and limitations under the License.
*/

import {Link} from 'react-aria-components';
import React from 'react';
import styles from './usePress-stories.css';
import {usePress} from '@react-aria/interactions';
Expand Down Expand Up @@ -84,3 +85,30 @@ function OnPress(props) {
</div>
);
}

export const linkOnPress = {
render: () => (
<div className={styles['outer-div']}>
{/* Note that the svg needs to not have pointer-events: none */}
<Link href="http://adobe.com" target="_blank">
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
height: '2rem',
width: '2rem',
fill: 'red'
}}>
<title>Adobe</title>
<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" />
</svg>
</Link>
</div>
),
parameters: {
description: {
data: 'Pressing on the link should always open a new tab. This tests specifically that usePress doesnt erroneously prevent default, especially on mobile'
}
}
};

1 comment on commit c42990f

@rspbot
Copy link

@rspbot rspbot commented on c42990f Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.