diff --git a/src/api.d.ts b/src/api.d.ts
index 1d3ad6d..511026b 100644
--- a/src/api.d.ts
+++ b/src/api.d.ts
@@ -1,6 +1,8 @@
-export interface SystemEvent {
+export type SystemEvent = {
   type: 'ENTER_KEY_TYPE'
   data: string
+} | {
+  type: 'HIDE'
 }
 
 export interface VirtualKeyboardEvent {
diff --git a/src/keyboard.ts b/src/keyboard.ts
index c9a73f3..1741279 100644
--- a/src/keyboard.ts
+++ b/src/keyboard.ts
@@ -4,7 +4,7 @@ import presetCss from 'bundle-text:./preset.css'
 import qwerty from '../layouts/qwerty.json'
 import { renderRow } from './key'
 import { div } from './util'
-import { onTouchEnd, onTouchStart, setEnterKeyType, setLayout as setLayout_ } from './ux'
+import { onTouchEnd, onTouchStart, setEnterKeyType, setLayer, setLayout as setLayout_ } from './ux'
 
 const builtInLayoutMap = { qwerty } as { [key: string]: Layout }
 
@@ -56,5 +56,8 @@ export function onMessage(message: string) {
     case 'ENTER_KEY_TYPE':
       setEnterKeyType(event.data)
       break
+    case 'HIDE':
+      setLayer('default', false)
+      break
   }
 }
diff --git a/tests/test-generic.spec.ts b/tests/test-generic.spec.ts
index 64f3c65..e151651 100644
--- a/tests/test-generic.spec.ts
+++ b/tests/test-generic.spec.ts
@@ -82,3 +82,15 @@ test('Preserve press order', async ({ page }) => {
   await expect(w).toHaveCSS('background-color', WHITE)
   await expect(o).toHaveCSS('background-color', WHITE)
 })
+
+test('HIDE event', async ({ page }) => {
+  await init(page)
+
+  const q = page.getByText('q')
+  const shift = page.locator('.fcitx-keyboard-shift')
+  await tap(shift)
+  await expect(q).toHaveText('Q')
+
+  await sendSystemEvent(page, { type: 'HIDE' })
+  await expect(q).toHaveText('q')
+})