More stable DropDown implementation

2 files changed, 17 insertions, 18 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index 53d722b1..80329d92 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -2,6 +2,7 @@ package pl.treksoft.kvision.dropdown
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.CssSize
 import pl.treksoft.kvision.html.BUTTONSTYLE
 import pl.treksoft.kvision.html.Button
 import pl.treksoft.kvision.html.LIST
@@ -71,6 +72,12 @@ open class DropDown(
             field = value
             refresh()
         }
+    override var width: CssSize?
+        get() = super.width
+        set(value) {
+            super.width = value
+            button.width = value
+        }
 
     private val idc = "kv_dropdown_" + counter
     internal val button: DropDownButton = DropDownButton(
@@ -80,7 +87,6 @@ open class DropDown(
     internal val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu"))
 
     init {
-        list.hide()
         setChildrenFromElements()
         this.addInternal(button)
         this.addInternal(list)
@@ -142,7 +148,6 @@ open class DropDown(
     @Suppress("UnsafeCastFromDynamic")
     override fun afterInsert(node: VNode) {
         this.getElementJQuery()?.on("show.bs.dropdown", { e, _ ->
-            if (!list.visible) list.visible = true
             this.dispatchEvent("showBsDropdown", obj { detail = e })
         })
         this.getElementJQuery()?.on("shown.bs.dropdown", { e, _ ->
@@ -152,7 +157,6 @@ open class DropDown(
             this.dispatchEvent("hideBsDropdown", obj { detail = e })
         })
         this.getElementJQuery()?.on("hidden.bs.dropdown", { e, _ ->
-            if (list.visible) list.visible = false
             this.dispatchEvent("hiddenBsDropdown", obj { detail = e })
         })
     }
@@ -167,12 +171,7 @@ open class DropDown(
     }
 
     open fun toggle() {
-        if (this.list.visible) {
-            this.list.getElementJQueryD()?.dropdown("toggle")
-        } else {
-            this.list.visible = true
-            window.setTimeout({ this.list.getElementJQueryD()?.dropdown("toggle") }, 0)
-        }
+        this.list.getElementJQueryD()?.dropdown("toggle")
     }
 }
 
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
index cd4f8930..41931abd 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
@@ -21,7 +21,7 @@ class DropDownSpec : DomSpec {
             val element = document.getElementById("test")
             val id = dd.button.id
             assertEquals(
-                "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
+                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -38,7 +38,7 @@ class DropDownSpec : DomSpec {
             val element = document.getElementById("test")
             val id = dd.button.id
             assertEquals(
-                "<div class=\"dropup\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
+                "<div class=\"dropup open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -55,7 +55,7 @@ class DropDownSpec : DomSpec {
             val element = document.getElementById("test")
             val id = dd.button.id
             assertEquals(
-                "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"dropdown-header\">abc</li></ul></div>",
+                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"dropdown-header\">abc</li></ul></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -72,7 +72,7 @@ class DropDownSpec : DomSpec {
             val element = document.getElementById("test")
             val id = dd.button.id
             assertEquals(
-                "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"divider\" role=\"separator\">abc</li></ul></div>",
+                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"divider\" role=\"separator\">abc</li></ul></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -89,7 +89,7 @@ class DropDownSpec : DomSpec {
             val element = document.getElementById("test")
             val id = dd.button.id
             assertEquals(
-                "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"disabled\"><a href=\"#\">abc</a></li></ul></div>",
+                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"disabled\"><a href=\"#\">abc</a></li></ul></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -102,11 +102,11 @@ class DropDownSpec : DomSpec {
             val root = Root("test")
             val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag")
             root.add(dd)
-            val menu = dd.list.getElementJQuery()
-            assertTrue("Dropdown menu is not rendered before toggle") { menu == null }
+            val visible = dd.getElementJQuery()?.hasClass("open") ?: false
+            assertTrue("Dropdown menu is not visible before toggle") { !visible }
             dd.toggle()
-            val menu2 = dd.list.getElementJQuery()
-            assertTrue("Dropdown menu is rendered after toggle") { menu2 != null }
+            val visible2 = dd.getElementJQuery()?.hasClass("open") ?: false
+            assertTrue("Dropdown menu is visible after toggle") { visible2 }
         }
     }
 }
\ No newline at end of file