Gameboy: release keyboard when canvas isn't focused

src/components/gameboy.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 // @ts-ignore No types available
 import { WasmBoy } from 'wasmboy';
 
@@ -8,21 +8,39 @@ interface IGameboy extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
 }
 
 /** Component to display a playable Gameboy emulator. */
-const Gameboy: React.FC<IGameboy> = ({ src, ...rest }) => {
+const Gameboy: React.FC<IGameboy> = ({ src, onFocus, onBlur, ...rest }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
 
   async function init() {
     await WasmBoy.config(WasmBoyOptions, canvas.current!);
     await WasmBoy.loadROM(src);
     await WasmBoy.play();
+
+    if (document.activeElement !== canvas.current) {
+      await WasmBoy.disableDefaultJoypad();
+    }
   }
 
+  const handleFocus: React.FocusEventHandler<HTMLCanvasElement> = useCallback(() => {
+    WasmBoy.enableDefaultJoypad();
+  }, []);
+
+  const handleBlur: React.FocusEventHandler<HTMLCanvasElement> = useCallback(() => {
+    WasmBoy.disableDefaultJoypad();
+  }, []);
+
   useEffect(() => {
     init();
   }, []);
 
   return (
-    <canvas ref={canvas} {...rest} />
+    <canvas
+      ref={canvas}
+      tabIndex={0}
+      onFocus={onFocus ?? handleFocus}
+      onBlur={onBlur ?? handleBlur}
+      {...rest}
+    />
   );
 };