Jquery-tokeninput not working properly on mobile

Question

We used jquery-tokeninput to let users search for their linkedin and facebook friends and select.

We are facing number of problems

1. An orange box highlights the text box when the user starts typing in the box. But this orange box does not fully cover the text box but only part of the text box around the text. We are unsure if this problem is due to some configuration mismatches with jQuery-tokeninput and our ruby code.

2. Sometimes, the pointer indicating the current typing location on the textbox is invisible. This happens when the user clicks on the textbox and no such pointer (a flickering | line) is seen.

https://i.stack.imgur.com/dZqEF.jpg is one of the screenshot https://i.stack.imgur.com/kxjBP.jpg, imgur.com/8KIXpa0 are other images of screenshots.

Following 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 the suggestions text box code being

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

and 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");
  }
});