search

reagent-project / reagent-forms

Bootstrap form components for Reagent
339 stars 78 forks source link

Typeahead broken on Mobile Safari #99

Closed duncan-bayne closed 7 years ago

duncan-bayne commented 8 years ago

I'm using typeahead controls for my site; they're working fine in desktop browsers (Chrome, Firefox) and other mobile browsers (Chrome, Firefox, Opera on Android) but are broken on Mobile Safari (Safari 7 on iOS 7.1.2) on an iPad Mini.

Initially things work correctly. The fields are displayed, along with placeholders. When I tap in a field it focuses, and the placeholder disappears. As I enter text, the drop-down appears and is correctly populated. However, if I tap on an item in the dropdown nothing happens; I can't actually select the items.

The code in question, trimmed for brevity:

(defn pilot-name-source [text]
  (filter
    #(-> % (.toLowerCase %) (.indexOf text) (> -1))
    ["Amelia Earhart", "Douglas Bader"]))

(def flight-sheet-template
  [:div
   [:div {:field :typeahead
          :id :pilot-name
          :input-placeholder "Pilot name"
          :data-source pilot-name-source
          :list-class "typeahead-list"
          :item-class "typeahead-item"
          :highlight-class "highlighted"}]])
yogthos commented 8 years ago

It's likely this problem, mobile Safari requires additional CSS for anything except buttons to respect on-click events.