Search code examples
ioscsstwitter-bootstrapbootstrap-tokenfield

Bootstrap Tokenfield does not work in mobile Safari/iOS 8

I am using bootstrap tokenfield to instrument my email textbox to support multiple email input.

User types letter a in the email textbox (the one with red font in the picture) . A list of matched emails show up in a selection menu (the box that shows the email [email protected] in black)

After the user clicks and selected an email, the selected value is not captured. At the end I only got a letter a in the email textbox

enter image description here

How can I fix this issue?

Solution

  • It turns out I am also using Fastclick in my project. It swallowed the click event of the selection menu (of css class tt-selectable) used by bootstrap-tokenfield

    At the end it is my solution. Fork the twitter typeahead.js project and change the following line from 

    $el = $(that.templates.suggestion(context)).data(keys.obj, suggestion).data(keys.val, 
that.displayFn(suggestion)).addClass(that.classes.suggestion + " " 
+ that.classes.selectable);

    to 

    $el = $(that.templates.suggestion(context)).data(keys.obj, suggestion).data(keys.val, 
that.displayFn(suggestion)).addClass(that.classes.suggestion + " " 
+ that.classes.selectable + " needsclick");

    The additional css class needsclick will disable fastclick on this elements