Using bootstrap dropdown with Om

clojurescript, om, twitter-bootstrap-3

Solution

Here's what I do to create a dropdown component:

(defn dropdown [cursor owner {:keys [id text values]}]
 (om/component
   (html
     [:div.dropdown
       [:button {:type "button"
                 :class "btn dropdown-toggle"
                 :data-toggle "dropdown"
                 :id id}
                text
                [:span {:class "caret"}]]
       [:ul {:class "dropdown-menu" :role "menu" :aria-labelledby id}
         [:li {:role "presentation"}
           (for [v values] 
             [:a {:role "menuitem" :tabIndex "-1" :href "#"} v])]]])))

It hides when it should. I use jQuery 1.11.1, Bootstrap 3.2.0 and sablono for clarity but that doesn't affect anything. I don't think you should be using IDidMount for jQuery as all interaction is handled via bootstrap's dropdown JavaScript plugin (which is included in Bootstrap library).

Problem

This is what I have: ``` (defn view [cursor owner] (reify om/IDidMount (did-mount [_] (-> (js/$ ".dropdown-toggle") (.dropdown))) om/IRender (render [_] (dom/div #js {:className "dropdown"} (dom/button #js {:className "btn btn-default dropdown-toggle" :type "button" :id "dropdownMenu1"} "Dropdown" (dom/span #js {:className "caret"})) (dom/ul #js {:className "dropdown-menu" :role "menu" :ariaLabelledby "dropdownMenu1"} (dom/li #js {:role "presentation"} (dom/a #js {:role "menuitem" :tabIndex "-1" :href "#"} "Action")) (dom/li #js {:role "presentation"} (dom/a #js {:role "menuitem" :tabIndex "-1" :href "#"} "Another action"))))))) ``` The problem is that once the dropdown is opened, it does not hide anymore as it should be when one clicks on it or somewhere else. Also keystrokes don't work. I believe a missing something important here, what could it be? I'm using bootstrap 3.1.1 and jquery 1.11.0. Thanks.

Original source