@applicaster/zapp-react-dom-app 13.0.0-rc.35 → 13.0.0-rc.37

package/App/InteractionManager/index.tsx

@@ -140,13 +140,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
     this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
 
+    this.handlePhysicalKeyboardDismiss =
+      this.handlePhysicalKeyboardDismiss.bind(this);
+
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
   }
 
   componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDownListener);
+    window.addEventListener("keydown", this.onKeyDownListener, true);
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -181,6 +184,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease.bind(this)
     );
+
+    document.addEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   componentWillUnmount() {
@@ -209,6 +217,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease
     );
+
+    document.removeEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   performExit() {
@@ -448,20 +461,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     /**
-     When pressing backspace or the Native "Back" button:
+     When pressing escape or the Native "Back" button:
      if on the transport controls: we show the player
      if on the player : we show the UI
      if on the UI : we exit the app
+     note: backspace affects the keyboard input, so it not handled here
      */
-
-    if (
-      keyCode(event).matchesAny(
-        KEYS.Back,
-        KEYS.Escape,
-        KEYS.EscapeDevice,
-        KEYS.Backspace
-      )
-    ) {
+    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
       switch (displayState) {
         case DISPLAY_STATES.DEFAULT:
         case DISPLAY_STATES.PLAYER:
@@ -510,6 +516,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
+        focusManager.pressIn();
         focusManager.press();
       }
 
@@ -542,12 +549,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
         focusManager.moveFocus(direction);
       }
 
-      if (!isDialogVisible) {
-        // run focus recovery on user interaction attempt
-        // probably we failed to set initial focus for some reason
-        focusManager.recoverFocus();
-      }
-
       if (
         displayState === DISPLAY_STATES.PLAYER ||
         displayState === DISPLAY_STATES.HUD
@@ -652,7 +653,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  handleKeyboardDismiss = () => {
+  handleKeyboardDismiss() {
     this.isDismissing = true;
 
     this.setState(
@@ -663,9 +664,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
       },
       () => {
         this.isDismissing = false;
+        focusManager.recoverFocus();
       }
     );
-  };
+  }
 
   handleKeyboardInput = (value: string) => {
     const { activeInputRef } = this.state;
@@ -761,6 +763,35 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ].includes(event.code);
   }
 
+  handlePhysicalKeyboardDismiss(event: CustomEvent) {
+    const { value, position, inputElement } = event.detail;
+
+    this.isDismissing = true;
+
+    this.setState(
+      {
+        isKeyboardVisible: false,
+        keyboardInput: "",
+        activeInputRef: null,
+      },
+      () => {
+        if (inputElement) {
+          inputElement.value = value;
+          inputElement.focus();
+          inputElement.setSelectionRange(position, position);
+
+          const keyboardEvent = new CustomEvent("keyboardUpdate", {
+            detail: { value },
+          });
+
+          document.dispatchEvent(keyboardEvent);
+        }
+
+        this.isDismissing = false;
+      }
+    );
+  }
+
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "13.0.0-rc.35",
+  "version": "13.0.0-rc.37",
   "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": "13.0.0-rc.35",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.35",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.35",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.35",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.35",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-rc.37",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.37",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.37",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.37",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.37",
     "abortcontroller-polyfill": "^1.7.5",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",