Fix various problems with re-creating DOM nodes.

5 files changed, 51 insertions, 15 deletions

diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt
index 09b68633..8d7c49a7 100644
--- a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt
@@ -53,7 +53,6 @@ internal class ChartCanvas(
     }
 
     override fun afterInsert(node: VNode) {
-        super.afterInsert(node)
         jsChart =
             JsChart(this.context2D, configuration.toJs(this::translate))
     }
diff --git a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
index 69b84c87..7c1c8d71 100644
--- a/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
+++ b/kvision-modules/kvision-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
@@ -51,7 +51,10 @@ open class DateTimeInput(
     classes: Set<String> = setOf()
 ) : Widget(classes + "form-control"), FormInput {
 
+    private var initialized = false
+
     init {
+        this.vnkey = "kv_datetimeinput_${counter++}"
         this.setInternalEventListener<DateTimeInput> {
             change = {
                 self.changeValue()
@@ -78,7 +81,7 @@ open class DateTimeInput(
     /**
      * Determines if the field is disabled.
      */
-    override var disabled by refreshOnUpdate(false)
+    override var disabled by refreshOnUpdate(false) { refresh(); checkDisabled() }
     /**
      * Determines if the text input is automatically focused.
      */
@@ -160,6 +163,22 @@ open class DateTimeInput(
         return sn
     }
 
+    private fun checkDisabled() {
+        if (disabled) {
+            if (initialized) {
+                getElementJQueryD()?.datetimepicker("remove")
+                initialized = false
+            }
+        } else {
+            if (!initialized) {
+                this.initDateTimePicker()
+                this.initEventHandlers()
+                this.refreshState()
+                initialized = true
+            }
+        }
+    }
+
     @Suppress("UnsafeCastFromDynamic")
     protected open fun refreshState() {
         value?.let {
@@ -190,35 +209,31 @@ open class DateTimeInput(
      * Open date/time chooser popup.
      */
     open fun showPopup() {
-        getElementJQueryD()?.datetimepicker("show")
+        if (initialized) getElementJQueryD()?.datetimepicker("show")
     }
 
     /**
      * Hides date/time chooser popup.
      */
     open fun hidePopup() {
-        getElementJQueryD()?.datetimepicker("hide")
+        if (initialized) getElementJQueryD()?.datetimepicker("hide")
     }
 
     @Suppress("UnsafeCastFromDynamic")
     override fun afterInsert(node: VNode) {
         if (!this.disabled) {
             this.initDateTimePicker()
-            this.getElementJQuery()?.on("changeDate") { e, _ ->
-                this.dispatchEvent("change", obj { detail = e })
-            }
-            this.getElementJQuery()?.on("show") { e, _ ->
-                this.dispatchEvent("showBsDateTime", obj { detail = e })
-            }
-            this.getElementJQuery()?.on("hide") { e, _ ->
-                this.dispatchEvent("hideBsDateTime", obj { detail = e })
-            }
-            refreshState()
+            this.initEventHandlers()
+            this.refreshState()
+            initialized = true
         }
     }
 
     override fun afterDestroy() {
-        getElementJQueryD()?.datetimepicker("remove")
+        if (initialized) {
+            getElementJQueryD()?.datetimepicker("remove")
+            initialized = false
+        }
     }
 
     private fun initDateTimePicker() {
@@ -244,6 +259,18 @@ open class DateTimeInput(
         })
     }
 
+    private fun initEventHandlers() {
+        this.getElementJQuery()?.on("changeDate") { e, _ ->
+            this.dispatchEvent("change", obj { detail = e })
+        }
+        this.getElementJQuery()?.on("show") { e, _ ->
+            this.dispatchEvent("showBsDateTime", obj { detail = e })
+        }
+        this.getElementJQuery()?.on("hide") { e, _ ->
+            this.dispatchEvent("hideBsDateTime", obj { detail = e })
+        }
+    }
+
     /**
      * Get value of date/time input control as String
      * @return value as a String
@@ -267,6 +294,8 @@ open class DateTimeInput(
     }
 
     companion object {
+        internal var counter = 0
+
         private fun String.toDatePickerFormat(): String {
             return this.replace("YY", "yy").replace("m", "i").replace("MMMM", "{----}").replace("MMM", "{---}")
                 .replace("M", "m").replace("{----}", "MM").replace("{---}", "M").replace("H", "{-}")
diff --git a/kvision-modules/kvision-select/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt b/kvision-modules/kvision-select/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
index e89d4f5e..7ffdf2c2 100644
--- a/kvision-modules/kvision-select/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
+++ b/kvision-modules/kvision-select/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
@@ -130,6 +130,7 @@ open class SelectInput(
     override var size: InputSize? by refreshOnUpdate()
 
     init {
+        this.vnkey = "kv_selectinput_${counter++}"
         setChildrenFromOptions()
         this.setInternalEventListener<SelectInput> {
             change = {
@@ -348,6 +349,8 @@ open class SelectInput(
     }
 
     companion object {
+        internal var counter = 0
+
         /**
          * DSL builder extension function.
          *
diff --git a/kvision-modules/kvision-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt b/kvision-modules/kvision-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
index a887c007..c60aab2f 100644
--- a/kvision-modules/kvision-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
+++ b/kvision-modules/kvision-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
@@ -74,6 +74,7 @@ open class SpinnerInput(
 ) : Widget(classes + "form-control"), FormInput {
 
     init {
+        this.vnkey = "kv_spinnerinput_${counter++}"
         this.addSurroundingCssClass("input-group")
         if (buttonsType == ButtonsType.NONE) {
             this.addSurroundingCssClass("kv-spinner-btn-none")
diff --git a/kvision-modules/kvision-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt b/kvision-modules/kvision-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
index ee17949e..a250df42 100644
--- a/kvision-modules/kvision-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
+++ b/kvision-modules/kvision-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
@@ -138,6 +138,10 @@ open class UploadInput(uploadUrl: String? = null, multiple: Boolean = false, cla
 
     private val nativeFiles: MutableMap<KFile, File> = mutableMapOf()
 
+    init {
+        this.vnkey = "kv_uploadinput_${counter++}"
+    }
+
     override fun render(): VNode {
         return render("input")
     }