moved dropdown-direction code to DropdownMenu component (added bottom-anchor prop)

Author: furqanZafar

src/DropdownMenu.ls

@@ -16,6 +16,7 @@ module.exports = create-class do
 
     # get-default-props :: () -> Props
     get-default-props: ->
+        # bottom-anchor :: () -> ReactElement
         class-name: ""
         dropdown-direction: 1
         group-id: (.group-id) # Item -> a
@@ -86,7 +87,7 @@ module.exports = create-class do
         if !!@props.transition-enter or !!@props.transition-leave
             ReactCSSTransitionGroup do 
                 component: \div
-                transition-name: \slide 
+                transition-name: \custom 
                 transition-enter: @props.transition-enter
                 transition-leave: @props.transition-leave
                 transition-enter-timeout: @props.transition-enter-timeout
@@ -181,6 +182,13 @@ module.exports = create-class do
         else
             null
 
+    # component-did-update :: () -> ()
+    component-did-update: !->
+        dropdown-menu = find-DOM-node @refs.dropdown-menu-container ? @refs.dropdown-menu
+            ..?style.bottom = switch 
+                | @props.dropdown-direction == -1 => @props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom
+                | _ => ""
+
     # highlight-and-scroll-to-option :: Int, (() -> ())? -> ()
     highlight-and-scroll-to-option: (index, callback = (->)) !->
 

src/ReactSelectize.ls

@@ -226,26 +226,29 @@ module.exports = create-class do
 
             # (TETHERED / ANIMATED / SIMPLE) DROPDOWN
             DropdownMenu {} <<< @props <<< 
-
                 ref: \dropdownMenu
-
                 class-name: class-name-from-object do
                     \react-selectize : 1
                     "#{@props.class-name}" : 1
-
                 theme: @props.theme
 
-                # on-option-click :: (Eq e) => e -> ()
-                on-option-click: (highlighted-uid) !~>
-                    <~ @select-highlighted-uid anchor-index
-
+                # scroll-lock is used for blocking mouse interference with highlighted uid when using the arrow keys
+                # to scroll through the options list
                 scroll-lock: @props.scroll-lock
                 on-scroll-change: @props.on-scroll-change
 
+                # used when dropdown-direction is -1
+                # bottom-anchor :: () -> ReactElement
+                bottom-anchor: ~> find-DOM-node @refs.control
+
                 # used when @props.tether is true
                 # tether-target :: () -> ReactElement
                 tether-target: ~> find-DOM-node @refs.control
 
+                # on-option-click :: (Eq e) => e -> ()
+                on-option-click: (highlighted-uid) !~>
+                    <~ @select-highlighted-uid anchor-index
+
 
     # handle-keydown :: ComputedState -> Event -> Boolean
     handle-keydown: ({anchor-index}, e) ->
@@ -393,11 +396,6 @@ module.exports = create-class do
         if !@props.open and prev-props.open
             @props.on-highlighted-uid-change undefined
 
-        # flip the dropdown if props.dropdown-direction is -1
-        if @refs.dropdown-menu
-            (find-DOM-node @refs.dropdown-menu)?.style <<< 
-                bottom: if @props.dropdown-direction == -1 then (find-DOM-node @refs.control).offset-height else ""
-
     # component-will-receive-props :: Props -> ()
     component-will-receive-props: (props) !->
         if (typeof @props.disabled == \undefined or @props.disabled == false) and