caret blink on keyboard (#45)

Author: eagleoflqj

fcitx5-keyboard-web

@@ -13,6 +13,7 @@ let show = false
 export function removeCaret() {
   if (timer) {
     window.clearInterval(timer)
+    timer = null
   }
   document.querySelectorAll('.fcitx-mobile-caret').forEach(div => div.remove())
 }

page/caret.ts

@@ -43,12 +43,19 @@ test('Touch', async ({ page }) => {
   const caret = page.locator('.fcitx-mobile-caret')
   const { x: x0 } = await getBox(caret)
 
-  await tapKeyboard(page, 'a@')
-  await textarea.evaluate((el: HTMLTextAreaElement) => el.selectionStart = el.selectionEnd = 0)
+  await textarea.evaluate((el: HTMLTextAreaElement) => {
+    el.value = 'a'
+    el.selectionStart = el.selectionEnd = 0
+  })
   const { x } = await getBox(caret)
   expect(x).toEqual(x0)
 
   await textarea.tap()
-  const { x: x1 } = await getBox(caret)
-  expect(x1, 'Tapping on center should effectively change caret position').toBeGreaterThan(x0)
+  while (true) {
+    const { x: x1 } = await getBox(caret)
+    // Tapping on center should effectively change caret position
+    if (x1 > x0) {
+      break
+    }
+  }
 })

tests/test-caret.mobile.spec.ts

@@ -12,8 +12,12 @@ export function browserName(page: Page) {
   return page.context().browser()!.browserType().name()
 }
 
-export async function getBox(locator: Locator) {
-  return (await locator.boundingBox())!
+export async function getBox(locator: Locator): Promise<{ x: number, y: number, width: number, height: number }> {
+  while (true) {
+    const box = await locator.boundingBox()
+    if (box)
+      return box
+  }
 }
 
 // For test, don't let the initial "en" tip on focus affect panel visibility.

tests/util.ts

@@ -26,10 +26,12 @@ void WebKeyboard::update(UserInterfaceComponent component,
         auto preedit =
             instance_->outputFilter(inputContext, inputPanel.preedit())
                 .toString();
-        notify_main_async(
-            json{{"type", "PREEDIT"},
-                 {"data", {{"auxUp", auxUp}, {"preedit", preedit}}}}
-                .dump());
+        notify_main_async(json{{"type", "PREEDIT"},
+                               {"data",
+                                {{"auxUp", auxUp},
+                                 {"preedit", preedit},
+                                 {"caret", inputPanel.preedit().cursor()}}}}
+                              .dump());
         if (const auto &list = inputPanel.candidateList()) {
             const auto &bulk = list->toBulk();
             if (bulk) {