Cannot disable fastclick on a particular element

[nickhingston]

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...

[JakeSidSmith]

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]

i still need the click event to fire….so prevent default is not an option...

On 9 Oct 2017, at 09:37, Jake [email protected] wrote:

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?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/JakeSidSmith/react-fastclick/issues/54#issuecomment-335095773, or mute the thread https://github.com/notifications/unsubscribe-auth/AA059fRGu39hLiHwBZlaVZJeOZlJghqKks5sqdtXgaJpZM4PyJZ9.

[nickhingston]

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]

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]

@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]

@simonro https://github.com/simonrobbbb a question to ask yourself is why the library is needed at all. From iOS 8 and >2014 versions of Android, it should not be necessary. My reason for using is because I have had to use UIWebView (not WKWebView) in a cordova app. Fortunately I have since found a way around this and removed the need for it.

I also found that this library causes issues with input[type=select] - the iOS popover appears twice and is somewhat unresponsive and buggy. I’m unsure why and oddly this disable workaround didn’t help in this case, so I have not yet done the changes to the PR as Jake requested - I guess, as Jake suggests, a more complete solution is needed.

On 18 Oct 2017, at 09:43, Jake [email protected] wrote:

@simonrobb https://github.com/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.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/JakeSidSmith/react-fastclick/issues/54#issuecomment-337507493, or mute the thread https://github.com/notifications/unsubscribe-auth/AA059T-KJq7byDlRXs4j8NJbL_ZJwsxlks5stbpGgaJpZM4PyJZ9.

[shane-xi]

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]

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

[zongzi531]

@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]

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