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.

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

SpeedDialAction requires undocumented onClick handler on touch screens #13522

Closed
2 tasks done
haydengomes opened this issue Nov 5, 2018 · 1 comment · Fixed by #17301
Closed
2 tasks done

SpeedDialAction requires undocumented onClick handler on touch screens #13522

haydengomes opened this issue Nov 5, 2018 · 1 comment · Fixed by #17301
Assignees
Labels
component: speed dial This is the name of the generic UI component, not the React module!

Comments

@haydengomes
Copy link

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Configuring the SpeedDialAction button to use a Link component should update route on click on both desktop and touch screen devices.

Current Behavior

On touch screens, an exception is thrown because the SpeedDialAction is expecting an onClick function prop to be defined.

Steps to Reproduce

https://codesandbox.io/s/q9q7jrjr6j

  1. Create a SpeedDialAction with ButtonProps that configure the component to be Link and the to to be some valid route.
  2. In desktop, click on the action button and see that you're taken to the expected route
  3. On a touch enabled device, or Chrome's mobile emulator, tap on the same action button

Link:

  1. https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js#L91
  2. https://github.com/mui-org/material-ui/blob/master/pages/lab/api/speed-dial-action.md
  3. https://codesandbox.io/s/q9q7jrjr6j

Context

I created a SpeedDial and used ButtonProps to configure the SpeedDialAction buttons to use the Link component and have a to destination route for when it gets clicked. This worked fine on desktop, but on mobile an exception is thrown because the onClick function is not defined at
SpeedDialAction.js

(This prop seems to be missing from the documentation SpeedDialAction.md)

Your Environment

Tech Version
Material-UI ^3.2.2
Material-UI lab ^3.0.0-alpha.23
React ^16.5.2
Chrome 70.0.3538.77
react-router-dom ^4.3.1
@eps1lon eps1lon added the component: speed dial This is the name of the generic UI component, not the React module! label Nov 5, 2018
@balinabbb
Copy link

I was about to submit the very same issue, with one addition:

I get the following warning after navigating away with component={Link} and to="/other-url".
Did not test it, but my guess is the setState in handleTooltipClose after navigating away and unmounting the component.

React warning

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

    in SpeedDialAction (created by ForwardRef(SpeedDialAction))
    in ForwardRef(SpeedDialAction) (created by WithStyles(ForwardRef(SpeedDialAction)))
    in WithStyles(ForwardRef(SpeedDialAction)) (at Component.jsx:35)
    in div (created by ForwardRef(SpeedDial))
    in div (created by ForwardRef(SpeedDial))
    in ForwardRef(SpeedDial) (created by WithStyles(ForwardRef(SpeedDial)))

Your Environment 🌎

Tech Version
Material-UI v4.0.0
React v16.8.6
Browser Chromium 75.0.3770.90 (Official Build) snap (64-bit)
Material-UI lab v4.0.0-alpha.18

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: speed dial This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants