Typeahead broken on Mobile Safari
duncan-bayne opened this issue · comments
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"}]])
It's likely this problem, mobile Safari requires additional CSS for anything except buttons to respect on-click events.