Using bootstrap dropdown with Om

Question

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 as soon as the drop-down list opens, it no longer hides, as it should be when you click on it or somewhere else. Also keystrokes do not work. I believe that something important is missing here, what could it be? I am using bootstrap 3.1.1 and jquery 1.11.0.

Thanks.

Answer 1

Here is 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])]]]))) 

He hides when needed. I use jQuery 1.11.1, Bootstrap 3.2.0, and sablono for clarity, but this has no effect. I don’t think you should use IDidMount for jQuery, since all interaction is handled through the bootstrap JavaScript drop-down module (which is included in the Bootstrap library).

Answer 2

Another option is to use the Om-Bootstrap library that I wrote; there is a dropdown component that processes all this state inside you.

Drop-down menu:

 (:require [om-bootstrap.button :as b]) (b/toolbar {} (for [title ["Default" "Primary" "Success" "Info" "Warning" "Danger" "Link"] :let [style (.toLowerCase title)]] (b/dropdown {:bs-style style, :title title} (b/menu-item {:key 1} "Action") (b/menu-item {:key 2} "Another action") (b/menu-item {:key 3} "Something else here") (b/menu-item {:divider? true}) (b/menu-item {:key 4} "Separated link")))) 

The documentation site http://om-bootstrap.herokuapp.com provides examples and code snippets on how to use all of these components.