Merge pull request #7592 from niklasf/clinput-toggle

tie clinput toggle directly to focus (fixes #7586)

ui/cli/src/main.ts

@@ -1,29 +1,19 @@
 import modal from 'common/modal';
 
-export function app($wrap: Cash, toggle: () => void) {
-  const $input = $wrap.find('input');
-
+export function app(input: HTMLInputElement) {
   lichess.userComplete().then(uac => {
     uac({
-      input: $input[0] as HTMLInputElement,
+      input,
       friend: true,
       focus: true,
       onSelect: r => execute(r.name)
     });
-    const close = () => {
-      $input.val('');
-      $('body').hasClass('clinput') && toggle()
-    };
-    $input.on({
-      blur: () => setTimeout(close, 100),
-      keydown(e: KeyboardEvent) {
-        if (e.code == 'Enter') {
-          execute($input.val() as string);
-          $input.trigger('blur');
-          close();
-        }
+    $(input).on('keydown', (e: KeyboardEvent) => {
+      if (e.code == 'Enter') {
+        execute(input.value);
+        input.blur();
       }
-    })
+    });
   });
 }
 

ui/site/src/component/top-bar.ts

@@ -124,25 +124,34 @@ export default function() {
   { // cli
     const $wrap = $('#clinput');
     if (!$wrap.length) return;
-    let booted: boolean;
     const $input = $wrap.find('input');
+    let booted = false;
     const boot = () => {
       if (booted) return;
       booted = true;
-      loadModule('cli').then(() => window.LichessCli.app($wrap, toggle));
+      loadModule('cli').then(() => window.LichessCli.app($input[0]), () => booted = false);
     };
-    const toggle = () => {
-      boot();
-      $('body').toggleClass('clinput');
-      if ($('body').hasClass('clinput')) $input[0]!.focus();
-    };
-    $wrap.find('a').on('mouseover click', e => (e.type === 'mouseover' ? boot : toggle)());
+    $input.on({
+      blur() {
+        $input.val('');
+        $('body').removeClass('clinput');
+      },
+      focus() {
+        boot();
+        $('body').addClass('clinput');
+      }
+    });
+    $wrap.find('a').on({
+      mouseover: boot,
+      click() {
+        $('body').hasClass('clinput') ? $input[0]!.blur() : $input[0]!.focus();
+      }
+    });
     window.Mousetrap
       .bind('/', () => {
         $input.val('/');
-        requestAnimationFrame(() => toggle());
+        $input[0]!.focus();
       })
-      .bind('s', () => requestAnimationFrame(toggle));
-    if ($('body').hasClass('blind-mode')) $input.one('focus', toggle);
+      .bind('s', () => $input[0]!.focus());
   }
 }