@applicaster/zapp-react-dom-app 12.0.0-rc.120 → 12.0.0-rc.121

package/App/InteractionManager/index.tsx

@@ -67,7 +67,11 @@ type Props = {
   };
 };
 
-type State = { isKeyboardVisible: boolean; keyboardInput: string };
+interface State {
+  isKeyboardVisible: boolean;
+  keyboardInput: string;
+  activeInputRef: HTMLInputElement | null;
+}
 
 type KeyCode = { code: string; keyCode: number | string };
 
@@ -96,6 +100,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.state = {
       isKeyboardVisible: false,
       keyboardInput: "",
+      activeInputRef: null,
     };
 
     this.onMouseMoveListener = debounce({
@@ -461,6 +466,17 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     const { isDialogVisible } = confirmationDialogStore.getState();
 
+    if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
+      if (keyCode(event).matchesAny("Escape", "Back")) {
+        this.handleKeyboardDismiss();
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
+
     // If this is a supported longpress key we need to set the timeout and handle the longpress
     if (this.keySupportsLongPress(event)) {
       this.longKeyPressTimeout = setTimeout(() => {
@@ -468,16 +484,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       }, LONG_KEY_PRESS_TIMEOUT);
     }
 
-    if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
-      if (keyCode(event).matchesAny("Escape", "Back")) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.handleKeyboardDismiss();
-
-        return;
-      }
-    }
-
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls
@@ -694,16 +700,15 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
   handleInputFocus = (event: FocusEvent) => {
     if (!shouldUseOnScreenKeyboard()) return;
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLInputElement;
 
-    if (this.isDismissing) {
-      return;
-    }
+    if (this.isDismissing) return;
 
     if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
       this.setState({
         isKeyboardVisible: true,
-        keyboardInput: (target as HTMLInputElement).value || "",
+        keyboardInput: target.value || "",
+        activeInputRef: target,
       });
     }
   };
@@ -733,6 +738,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       {
         isKeyboardVisible: false,
         keyboardInput: "",
+        activeInputRef: null,
       },
       () => {
         this.isDismissing = false;
@@ -740,15 +746,29 @@ class InteractionManagerClass extends React.Component<Props, State> {
     );
   };
 
-  handleKeyboardInput(value: string) {
+  handleKeyboardInput = (value: string) => {
+    const { activeInputRef } = this.state;
+
+    if (activeInputRef) {
+      // Update the input's value
+      activeInputRef.value = value;
+
+      // Dispatch keyboard update event
+      const keyboardEvent = new CustomEvent("keyboardUpdate", {
+        detail: { value },
+      });
+
+      document.dispatchEvent(keyboardEvent);
+    }
+
     this.setState({ keyboardInput: value });
-  }
+  };
 
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
         <OnScreenKeyboard
-          initialValue={this.state.keyboardInput}
+          value={this.state.keyboardInput}
           onInput={this.handleKeyboardInput}
           onDismiss={this.handleKeyboardDismiss}
         />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-rc.120",
+  "version": "12.0.0-rc.121",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.0-rc.120",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.120",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.120",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.120",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.120",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-rc.121",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.121",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.121",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.121",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.121",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",