Fix keyboard and focus handling for UploadInput component

2 files changed, 20 insertions, 0 deletions

diff --git a/kvision-modules/kvision-bootstrap-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt b/kvision-modules/kvision-bootstrap-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
index 932bd444..ecdbf1b8 100644
--- a/kvision-modules/kvision-bootstrap-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
+++ b/kvision-modules/kvision-bootstrap-upload/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
@@ -181,6 +181,10 @@ open class UploadInput(uploadUrl: String? = null, multiple: Boolean = false, cla
     @Suppress("UnsafeCastFromDynamic")
     override fun afterInsert(node: VNode) {
         getElementJQueryD()?.fileinput(getSettingsObj())
+        getElementJQuery()?.parent()?.parent()?.parent()?.find("div.kv-fileinput-caption")?.removeAttr("tabindex")
+        getElementJQuery()?.parent()?.parent()?.parent()?.find("input.file-caption-name")?.attr("tabindex", "-1")
+        getElementJQuery()?.parent()?.parent()?.parent()?.find("button.fileinput-remove")?.removeAttr("tabindex")
+        getElementJQuery()?.parent()?.parent()?.parent()?.find("div.btn-file")?.removeAttr("tabindex")
         if (uploadUrl != null) {
             this.getElementJQuery()?.on("fileselect") { e, _ ->
                 this.dispatchEvent("fileSelectUpload", obj { detail = e })
@@ -201,6 +205,12 @@ open class UploadInput(uploadUrl: String? = null, multiple: Boolean = false, cla
                 return@lambda null
             }
         }
+        this.getElementJQuery()?.on("focus") { _, _ ->
+            getElementJQuery()?.parent()?.parent()?.parent()?.addClass("kv-focus")
+        }
+        this.getElementJQuery()?.on("blur") { _, _ ->
+            getElementJQuery()?.parent()?.parent()?.parent()?.removeClass("kv-focus")
+        }
     }
 
     override fun afterDestroy() {
diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css
index 4adc61c0..a6035b1d 100644
--- a/src/main/resources/css/style.css
+++ b/src/main/resources/css/style.css
@@ -387,3 +387,13 @@ select.form-control, .tabulator-row .tabulator-cell.tabulator-editing select {
   border-radius: 0 4px 4px 0;
   margin-right: 0;
 }
+
+.kv-focus {
+    border-radius: 0.25rem;
+    outline-width: 0px;
+    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+}
+
+.kv-focus .kv-fileinput-caption {
+    border-color: #80bdff;
+}