JQuery-tokeninput does not work correctly on mobile devices

We used jquery-tokeninput so that users can search for their friends and friends on facein and facebook.

We face a number of challenges

• An orange square highlights the text box when the user starts typing into the box. But this orange box does not completely enclose the text box, but only a portion of the text box around the text. We're not sure if this issue is due to some configuration inconsistencies with jQuery-tokeninput and our ruby ​​code.

• Sometimes the pointer pointing to the current location of the input in the text box is not visible. This happens when the user clicks on the text field and does not see such a pointer (flickering line).

http://imgur.com/ii6df3L is one of the screenshots http://imgur.com/7HId3id , imgur.com/8KIXpa0 are other screenshot images.

Below is the code we used in the erb and rb files

<div data-role="content">

    <%= form_tag(compose_referral_message_facebook_page_path, {:method => "get", "data-ajax" => false})  do %>

      <%= hidden_field_tag :job_posting_id, params[:job_posting_id] %>
      <%= hidden_field_tag :facebook_friend_list %>

      <%= label_tag(:att_uid, "Employee ID*") %>
      <%= text_field_tag(:att_uid, params[:att_uid], :placeholder => "Enter your ATTUID*") %>

      <%= label_tag(:to, "Search Connections by Name") %>

      <div data-role="content">
      <input type="text" id="facebook_friend_search_box_id", placeholder="Search Connections by Name"/>
      </div>

      <div data-role="content">
      <fieldset class="ui-grid-a">
          <div class="ui-block-a">
            <button id="facebook_friend_submit_button_id" type="submit" data-theme="b">
              Continue
            </button>
          </div>
          <div class="ui-block-b">
            <%= link_to "Cancel", show_jobs_page_url(:job_posting_id => params[:job_posting_id]), {"data-role" => "button", "data-theme" => "c"} %>
          </div>
  </fieldset>
  </div>

<% end %>

      

        
        
        
      

    

with suggestions text field code

  <div data-role="content">
  <input type="text" id="facebook_friend_search_box_id", placeholder="Search Connections by Name"/>
  </div>

      

        
        
        
      

    

and a corresponding logic file containing

$(document).ready(function() {
  if ($("#facebook_friend_search_box_id").length !== 0) {
    return $("#facebook_friend_search_box_id").tokenInput("search_facebook_friend");
  }
});