Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ButtonBase] Fix when changing enableRipple prop from false to true #19667

Merged
merged 13 commits into from
Feb 26, 2020
Merged

[ButtonBase] Fix when changing enableRipple prop from false to true #19667

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f546941
Fix crashing if rippleRef is null
dmtrKovalenko Feb 12, 2020
c9e7761
Add test that reproduces crash
dmtrKovalenko Feb 24, 2020
285a7df
Fix crashing by moving <NoSsr /> outside of rendering conditino
dmtrKovalenko Feb 24, 2020
d17f1a1
Get rid of autoFocus button in tests
dmtrKovalenko Feb 24, 2020
fefc0af
Ignore typescript errors in test
dmtrKovalenko Feb 24, 2020
95a3237
Run prettier in ButtonBase.test.js
dmtrKovalenko Feb 24, 2020
07a312f
Get rid of @ts-ignore
dmtrKovalenko Feb 24, 2020
85a4ae5
Fix syntax error in typescript type comment alias
dmtrKovalenko Feb 24, 2020
f646dbb
Throw error if buttonRef is missing in test
dmtrKovalenko Feb 25, 2020
9ae49af
Allow chilren={null} in <NoSsr />
dmtrKovalenko Feb 25, 2020
d63a6ad
yarn prettier
oliviertassinari Feb 26, 2020
9f2921b
yarn docs:api
oliviertassinari Feb 26, 2020
1f124be
let's not forget about the TypeScript types
oliviertassinari Feb 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/material-ui/src/ButtonBase/ButtonBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,12 +302,12 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
{...other}
>
{children}
{!disableRipple && !disabled ? (
<NoSsr>
{/* TouchRipple is only needed client-side, x2 boost on the server. */}
<NoSsr>
{!disableRipple && !disabled && (
/* TouchRipple is only needed client-side, x2 boost on the server. */
<TouchRipple ref={rippleRef} center={centerRipple} {...TouchRippleProps} />
</NoSsr>
) : null}
)}
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
</NoSsr>
</ComponentProp>
);
});
Expand Down
40 changes: 40 additions & 0 deletions packages/material-ui/src/ButtonBase/ButtonBase.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,46 @@ describe('<ButtonBase />', () => {
button.querySelectorAll('.ripple-visible .child:not(.child-leaving)'),
).to.have.lengthOf(0);
});

it('should not crash when changes enableRipple from false to true', () => {
function App() {
const [enableRipple, setRipple] = React.useState(false);

return (
<div>
<button
type="button"
data-testid="trigger"
onClick={() => {
setRipple(true);
}}
>
Trigger crash
</button>
<ButtonBase
autoFocus
TouchRippleProps={{
classes: {
ripplePulsate: 'ripple-pulsate',
},
}}
focusRipple
disableRipple={!enableRipple}
>
1
</ButtonBase>
<ButtonBase autoFocus focusRipple>
2
</ButtonBase>
</div>
);
}

const { container, getByTestId } = render(<App />);

fireEvent.click(getByTestId('trigger'));
expect(container.querySelectorAll('.ripple-pulsate')).to.have.lengthOf(1);
});
});
});

Expand Down