Skip to content

Commit

Permalink
simplify further
Browse files Browse the repository at this point in the history
  • Loading branch information
snowystinger committed Dec 18, 2024
1 parent 3b2a5a8 commit 133ecd6
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 15 deletions.
16 changes: 2 additions & 14 deletions packages/react-aria-components/src/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,19 +156,6 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
}
wasPending.current = isPending;
}, [isPending, isFocused, ariaLabelledby, buttonId]);
let pendingButtonProps: DOMAttributes<HTMLButtonElement> = useMemo(() => isPending ? {
onKeyDown: (e) => {
if ((e.key === 'Enter' || e.key === ' ') && e.currentTarget instanceof HTMLButtonElement) {
e.preventDefault();
}
},
onClick: (e) => {
if (e.currentTarget instanceof HTMLButtonElement) {
e.preventDefault();
}
},
type: buttonProps.type === 'submit' ? 'button' : buttonProps.type
} : {}, [isPending]);

// When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
// We do this by rendering a hidden submit button that is disabled BEFORE the actual submit button as a form's default button is the first submit button
Expand All @@ -178,8 +165,9 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
<>
<button
{...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}
{...mergeProps(buttonProps, pendingButtonProps, focusProps, hoverProps)}
{...mergeProps(buttonProps, focusProps, hoverProps)}
{...renderProps}
type={buttonProps.type === 'submit' && isPending ? 'button' : buttonProps.type}
id={buttonId}
ref={ref}
aria-labelledby={ariaLabelledby}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/test/Button.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ describe('Button', () => {

// Note: two inputs are needed, otherwise https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#implicit-submission
// Implicit form submission can happen if there's only one.
it.only('should prevent implicit form submission when isPending', async function () {
it('should prevent implicit form submission when isPending', async function () {
let onSubmitSpy = jest.fn(e => e.preventDefault());
function TestComponent(props) {
let [pending, setPending] = useState(false);
Expand Down

0 comments on commit 133ecd6

Please sign in to comment.