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

Tap not working on Mobile (iOS) #6

Open
jpsfs opened this issue Jun 16, 2015 · 4 comments
Open

Tap not working on Mobile (iOS) #6

jpsfs opened this issue Jun 16, 2015 · 4 comments

Comments

@jpsfs
Copy link

jpsfs commented Jun 16, 2015

Hi!

I'm having some trouble using react-typeahead-component on mobile devices namely iOS (iPhone 4S, iPad 2) devices with Chrome.

When I try to select the input, nothing happens. It seems that the input that gives the typeahead look is getting the focus event instead of the actual input where the user needs to write.

I was able to reproduce this using your Youtube example: http://ezequiel.github.io/react-typeahead-component/youtube/

Any ideas on how to fix this?

Cheers!

@ezequiel
Copy link
Owner

Hey @jpsfs, thanks for the feedback. I will try to fix this.

@jpsfs
Copy link
Author

jpsfs commented Jun 17, 2015

Hi @ezequiel, thank you for looking into to it.

I've done some more tests and it's definitely related with both inputs being on top of each other.

From what I've seen from other examples (ex: https://twitter.github.io/typeahead.js/) they put the hint input first and with position: absolute;. From what I've seen with your component, you go the other way around.

Changing this fixed this bug but the dropdown seems not to be working after these changes. I'm not familiar with all the source of react-typeahead-component, so probably after changing the order some other things need to be changed also.

I hope this gives you a little more insight about the issue. Please let me know if I can be of some assistance.

Best regards,

@ezequiel
Copy link
Owner

@jpsfs

Thanks for your investigation! I was able to use the idea you presented, and it indeed works. I've pushed the fix in release 0.6.0.

There's just one more issue I've found though: once the dropdown opens, touching one of the list items doesn't do anything... tricky. I may need some help with this one.

@ezequiel
Copy link
Owner

@jpsfs

This seems to be part of a bigger problem on mobile browsers (Safari, at least). Click events don't work as expected. React has acknowledged this, and recently merged a fix. See issue facebook/react#1169 and pull facebook/react#1536.

Apparently, adding cursor: pointer to the item fixes the clicking issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants