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

Cannot disable fastclick on a particular element #54

Open
nickhingston opened this Issue Oct 9, 2017 · 10 comments

Comments

Projects
None yet
5 participants
@nickhingston
Copy link

nickhingston commented Oct 9, 2017

Need the possibility of disabling fastclick on a specific element.

My particular case was an input type file that is hidden, but the label is used as a button to activate it.

e.g.


<label htmlFor="addFileInput" >
  <i className="icon-add-1" />
</label>
<input className="hidden" id="addFileInput" type="file" accept="image/*" onChange={this.handleUploadFile} ref={ref => { this.fileInput = ref; }} />

pull request coming...

@nickhingston nickhingston referenced a pull request that will close this issue Oct 9, 2017

Open

Add the ability to disable fastclick #55

@JakeSidSmith

This comment has been minimized.

Copy link
Owner

JakeSidSmith commented Oct 9, 2017

I believe if you call event.preventDefault() in onTouchEnd it should prevent the fastclick.

What is the issue with having fastclick applied to the label?

@nickhingston

This comment has been minimized.

Copy link
Author

nickhingston commented Oct 9, 2017

@nickhingston

This comment has been minimized.

Copy link
Author

nickhingston commented Oct 9, 2017

so with my fix and adding the no-fastclick class to the input the following now works as intended:

<label htmlFor="addFileInput" >
  <i className="icon-add-1" />
</label>
<input className="no-fastclick hidden" id="addFileInput" type="file" accept="image/*" onChange={this.handleUploadFile} ref={ref => { this.fileInput = ref; }} />
@simonrobb

This comment has been minimized.

Copy link

simonrobb commented Oct 18, 2017

I'm having the same trouble.

Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event in the console using document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.

When the library proxies a touch event to the native label onclick functionality, client code is triggering the file input opening and so it's being blocked by the browser.

@JakeSidSmith

This comment has been minimized.

Copy link
Owner

JakeSidSmith commented Oct 18, 2017

@simonrobb would you mind opening another issue about this, as although it can be solved by disabling fastclick, it'd be good to see if I can find a fix for this anyway.

There shouldn't be any trouble really, as fastclick does not actually trigger any events, it just calls your callback in the touch events and prevents the onClick event. For inputs it simply calls input.focus(), which I guess works for most inputs, but not for files.

@nickhingston

This comment has been minimized.

Copy link
Author

nickhingston commented Oct 18, 2017

@shane-xi

This comment has been minimized.

Copy link

shane-xi commented Nov 27, 2018

I'm having the same trouble.

Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event in the console using document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.

When the library proxies a touch event to the native label onclick functionality, client code is triggering the file input opening and so it's being blocked by the browser.

I'm having the same trouble like you had sad. Could you tell me how to fix it? thx

@shane-xi

This comment has been minimized.

Copy link

shane-xi commented Nov 27, 2018

@simonrobb Could you tell me how to fix it ? if you have solved this quesiton. thx

@zongzi531

This comment has been minimized.

Copy link

zongzi531 commented Feb 25, 2019

@shane-xi @simonrobb I had the same trouble too in UIWebView and i solved it. i uninstalled react-fastclick, install fastclick can solved.

@shane-xi

This comment has been minimized.

Copy link

shane-xi commented Mar 18, 2019

我后来也是干掉了react-fastclick,直接用的fastclick解决的 @zongzi531

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.