fix(keybindings): add js to force a blur on successful keybind change (…

…#1753)

ui/src/components/settings/sub_pages/keybinds.rs

@@ -26,6 +26,16 @@ const AVOID_INPUT_ON_DIV: &str = r#"
         event.preventDefault(); 
     });"#;
 
+const UNFOCUS_DIV_ON_SUBMIT: &str = r#"
+        let currentDiv = document.getElementById("$UUID");
+        let innerDiv = currentDiv.querySelector('.keybind-section-keys');
+        if (innerDiv.classList.contains('recording')) {
+            innerDiv.addEventListener('keyup', function() {
+                innerDiv.blur();
+            });
+          }
+"#;
+
 #[derive(PartialEq, Props)]
 pub struct KeybindProps {
     pub keys: Vec<String>, // TODO: This should be a Vec<Key>
@@ -122,6 +132,18 @@ pub fn KeybindSection(cx: Scope<KeybindSectionProps>) -> Element {
     let eval = use_eval(cx);
     let script = AVOID_INPUT_ON_DIV.replace("$UUID", keybind_section_id.as_str());
     let _ = eval(&script);
+    let keybind_section_id_clone = keybind_section_id.clone();
+
+    use_effect(cx, is_recording, |is_recording| {
+        to_owned![eval];
+        async move {
+            if *is_recording {
+                let unfocus_script =
+                    UNFOCUS_DIV_ON_SUBMIT.replace("$UUID", keybind_section_id_clone.as_str());
+                let _ = eval(&unfocus_script);
+            };
+        }
+    });
 
     let mut keybind_class = "keybind-section-keys".to_owned();
     if **is_recording {