From 6975e12459ae6e1dcf51caae752290e03be4b279 Mon Sep 17 00:00:00 2001
From: Syiril Rakhul Haqim <syirilrakhulhaqim@gmail.com>
Date: Wed, 25 Jun 2025 17:17:42 +0800
Subject: [PATCH] Fix to only remove specific keyboard event listener

---
 packages/keyboard/package.json       |  1 +
 packages/keyboard/src/useKeyboard.ts | 49 ++++++++++++++++++++--------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/keyboard/package.json b/packages/keyboard/package.json
index 52eac4a..0d25f18 100644
--- a/packages/keyboard/package.json
+++ b/packages/keyboard/package.json
@@ -29,6 +29,7 @@
   },
   "peerDependencies": {
     "@capacitor/core": ">=3.0.0",
+    "@capacitor/device": ">=3.0.0",
     "@capacitor/keyboard": "*",
     "react": "*"
   },
diff --git a/packages/keyboard/src/useKeyboard.ts b/packages/keyboard/src/useKeyboard.ts
index e03cce8..97cc96a 100644
--- a/packages/keyboard/src/useKeyboard.ts
+++ b/packages/keyboard/src/useKeyboard.ts
@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Keyboard, KeyboardInfo, KeyboardPlugin } from '@capacitor/keyboard';
 import { AvailableResult } from './util/models';
-import { Capacitor } from '@capacitor/core';
+import { Capacitor, PluginListenerHandle } from '@capacitor/core';
+import { Device } from '@capacitor/device';
 interface KeyboardResult extends AvailableResult {
   isOpen: boolean;
   keyboardHeight: number;
@@ -15,24 +16,46 @@ if (!Capacitor.isPluginAvailable('Keyboard')) {
 export function useKeyboard(): KeyboardResult {
   const [isOpen, setIsOpen] = useState(false);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [platform, setPlatform] = useState('web');
+
+  const showCallback = useCallback((ki: KeyboardInfo) => {
+    const keyboardHeight = ki.keyboardHeight;
+    setIsOpen(true);
+    setKeyboardHeight(keyboardHeight);
+  }, []);
+
+  const hideCallback = useCallback(() => {
+    setIsOpen(false);
+    setKeyboardHeight(0);
+  }, []);
 
   useEffect(() => {
-    const showCallback = (ki: KeyboardInfo) => {
-      const keyboardHeight = ki.keyboardHeight;
-      setIsOpen(true);
-      setKeyboardHeight(keyboardHeight);
+    const checkIsNativePlatform = async () => {
+      const deviceInfo = await Device.getInfo();
+      setPlatform(deviceInfo.platform);
     };
-    const hideCallback = () => {
-      setIsOpen(false);
-      setKeyboardHeight(0);
+    checkIsNativePlatform();
+  }, []);
+
+  useEffect(() => {
+    let showListener: PluginListenerHandle, hideListener: PluginListenerHandle;
+
+    const getKeyboardListener = async () => {
+      showListener = await Keyboard.addListener('keyboardDidShow', showCallback);
+      hideListener = await Keyboard.addListener('keyboardDidHide', hideCallback);
     };
-    Keyboard.addListener('keyboardDidShow', showCallback);
-    Keyboard.addListener('keyboardDidHide', hideCallback);
+
+    if (platform !== 'web') {
+      getKeyboardListener();
+    }
 
     return () => {
-      Keyboard.removeAllListeners();
+      if (platform !== 'web' && showListener && hideListener) {
+        showListener.remove();
+        hideListener.remove();
+      }
     };
-  }, [setIsOpen, setKeyboardHeight]);
+  }, [setIsOpen, setKeyboardHeight, platform]);
 
   return {
     isOpen,