@24i/bigscreen-sdk 1.0.46-alpha.2746 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.46-alpha.2746",
+    "version": "1.0.47",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -42,7 +42,7 @@
         "@24i/appstage-shared-events-manager": "1.0.11",
         "@24i/appstage-shared-perf-utils": "1.0.11",
         "@24i/bigscreen-players-engine-base": "4.0.10",
-        "@24i/smartapps-datalayer": "3.0.17",
+        "@24i/smartapps-datalayer": "3.0.18",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
         "csstype": "^3.1.3",

package/packages/keyboard/src/utils/caret.ts

@@ -1,14 +1,11 @@
-const updateCaretPosition = (input: HTMLInputElement, position: number) => {
-    input.selectionStart = position;
-    input.selectionEnd = position;
-};
+import { setInputSelectionRange } from './setInputSelectionRange';
 
 export const caretLeft = (input: HTMLInputElement | null): false | number => {
     if (!input) return false;
     const selectionStart = input.selectionStart!;
     if (selectionStart > 0) {
         const newPosition = selectionStart - 1;
-        updateCaretPosition(input, newPosition);
+        setInputSelectionRange(input, newPosition);
         return newPosition;
     }
     return false;
@@ -20,7 +17,7 @@ export const caretRight = (input: HTMLInputElement | null): false | number => {
     const selectionStart = input.selectionStart!;
     if (selectionStart < value.length) {
         const newPosition = selectionStart + 1;
-        updateCaretPosition(input, newPosition);
+        setInputSelectionRange(input, newPosition);
         return newPosition;
     }
     return false;
@@ -30,7 +27,7 @@ export const caretHome = (input: HTMLInputElement | null): false | number => {
     if (!input) return false;
     const selectionStart = input.selectionStart!;
     if (selectionStart > 0) {
-        updateCaretPosition(input, 0);
+        setInputSelectionRange(input, 0);
         return 0;
     }
     return false;
@@ -41,7 +38,7 @@ export const caretEnd = (input: HTMLInputElement | null): false | number => {
     const { value: { length } } = input;
     const selectionStart = input.selectionStart!;
     if (selectionStart < length) {
-        updateCaretPosition(input, length);
+        setInputSelectionRange(input, length);
         return length;
     }
     return false;

package/packages/keyboard/src/utils/input.ts

@@ -1,3 +1,5 @@
+import { setInputSelectionRange } from './setInputSelectionRange';
+
 export const insertCharAtCaret = (input: HTMLInputElement | null, char: string): false | string => {
     if (!input) return false;
     const { value } = input;
@@ -6,8 +8,7 @@ export const insertCharAtCaret = (input: HTMLInputElement | null, char: string):
     const postCaret = value.substring(selectionStart);
     input.value = `${preCaret}${char}${postCaret}`;
     const newCaretPosition = selectionStart + char.length;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
+    setInputSelectionRange(input, newCaretPosition);
     return input.value;
 };
 
@@ -20,8 +21,7 @@ export const backspace = (input: HTMLInputElement): false | string => {
     const postCaret = value.substring(selectionStart);
     input.value = `${preCaret}${postCaret}`;
     const newCaretPosition = selectionStart - 1;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
+    setInputSelectionRange(input, newCaretPosition);
     return input.value;
 };
 
@@ -34,7 +34,6 @@ export const del = (input: HTMLInputElement): false | string => {
     const postCaret = value.substring(selectionStart + 1);
     input.value = `${preCaret}${postCaret}`;
     const newCaretPosition = selectionStart;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
+    setInputSelectionRange(input, newCaretPosition);
     return input.value;
 };

package/packages/keyboard/src/utils/setInputSelectionRange.ts

@@ -0,0 +1,10 @@
+// On some platforms, selectionStart/selectionEnd may change focus.
+// This function ensures that the focus state remains the same.
+export const setInputSelectionRange = (input: HTMLInputElement, position: number) => {
+    const { activeElement } = document;
+    const wasFocused = activeElement === input;
+    if (!wasFocused) input.focus();
+    input.selectionStart = position;
+    input.selectionEnd = position;
+    if (!wasFocused) (activeElement as HTMLElement).focus();
+};