typeahead date-source returning a vector

asok commented 7 years ago

Hi this https://github.com/reagent-project/reagent-forms/pull/63 has introduced possibility to specify a "label" for a value for the typeahead input. I had a hard time to crack it. Better docs on this could help :)

The field is an id of a person, but I want to display and search by full-name of the person. What I think has to be done:

the data-source needs to return a vector [full-name id]
in-fn takes id and finds the correct full-name to put into input's value
out-fn takes the vector and returns id that has to be stored
result-fn returns what will be displayed as the candidates (full-name in my case)

Roughly I do:

(defn- full-name [person]
  (if person
    (str (:first_name person) " " (:last_name person))
    ""))

(defn people-source [people]
  (fn [text]
    (->> people
         (filter #(-> (full-name %)
                      (.toLowerCase)
                      (.indexOf text)
                      (> -1)))
         (mapv #(vector (full-name %) (:id %))))))

    [:div
     [:label.label "Lead author"]
     [:label.input
      [:div {:field :typeahead,
             :data-source (people-source people)
             :input-class "form-control"
             :list-class "typeahead-list"
             :item-class "typeahead-item"
             :clear-on-focus? false
             :highlight-class "highlighted"
             :in-fn (fn [id]
                      [(full-name (first (filter #(= id (:id %)) people))) id])
             :out-fn (fn [[name id]] id)
             :result-fn (fn [[name id]] name)
             :id :lead_author.documas_person_id}]]]

This works until I remove option clear-on-focus?. I seems that here the on-focus event gets fired when a candidate is selected also. [UPDATE: this only happens when clicking on a candidate, using keyboard it works alright]

So 2 questions:

is that the correct way to use typeahead to be able to have value -> label functionality?
what to do to clear the input on focussing but not when a selection is made?

yogthos commented 7 years ago

Yeah that looks like an omission as keyboard/clicking should work consistently. The typeahead looks correct, but I think the widget needs to be updated to handle the clearing case.

asok commented 7 years ago

Those should fix it:

reagent-project / reagent-forms

typeahead date-source returning a vector #116