fix: added setCurrentFocus function in ui-store

deriv-com · Dec 13, 2024 · 70adb5b · 70adb5b
1 parent e244c10
commit 70adb5b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/pages/dashboard/bot-list/save-modal/save-modal.tsx b/src/pages/dashboard/bot-list/save-modal/save-modal.tsx
@@ -54,7 +54,7 @@ const SaveModalForm: React.FC<TSaveModalForm> = ({
         initialValues={{
             is_local: true,
             save_as_collection: false,
-            bot_name: bot_name === config.default_file_name ? '' : bot_name,
+            bot_name: bot_name === config().default_file_name ? '' : bot_name,
         }}
         validate={validateBotName}
         onSubmit={onConfirmSave}
@@ -80,8 +80,8 @@ const SaveModalForm: React.FC<TSaveModalForm> = ({
                                             placeholder={localize('Untitled Strategy')}
                                             error={touched[field.name] && errors[field.name]}
                                             label={localize('Bot name')}
-                                            onFocus={e => setCurrentFocus(e.currentTarget.name)}
-                                            onBlur={() => setCurrentFocus(null)}
+                                            onFocus={e => setCurrentFocus(e.currentTarget.value)}
+                                            onBlur={() => setCurrentFocus('')}
                                             {...field}
                                         />
                                     )}

diff --git a/src/stores/ui-store.ts b/src/stores/ui-store.ts
@@ -1,4 +1,5 @@
 import { action, makeObservable, observable } from 'mobx';
+import { isTouchDevice } from '@/components/shared/utils/screen/responsive';
 
 export default class UiStore {
     is_mobile = true;
@@ -7,6 +8,7 @@ export default class UiStore {
     is_chart_layout_default = true;
     is_dark_mode_on = localStorage.getItem('theme') === 'dark';
     account_switcher_disabled_message = '';
+    current_focus = null;
     show_prompt = false;
     is_trading_assessment_for_new_user_enabled = false;
     is_accounts_switcher_on = false;
@@ -16,20 +18,23 @@ export default class UiStore {
 
     constructor() {
         makeObservable(this, {
-            show_prompt: observable,
+            account_switcher_disabled_message: observable,
+            current_focus: observable,
+            is_accounts_switcher_on: observable,
             is_dark_mode_on: observable,
-            is_mobile: observable,
             is_desktop: observable,
+            is_mobile: observable,
             is_tablet: observable,
-            account_switcher_disabled_message: observable,
-            setDarkMode: action,
-            setDevice: action,
-            setAccountSwitcherDisabledMessage: action,
-            setPromptHandler: action,
-            setIsTradingAssessmentForNewUserEnabled: action.bound,
             is_trading_assessment_for_new_user_enabled: observable,
-            is_accounts_switcher_on: observable,
+            show_prompt: observable,
+            setAccountSwitcherDisabledMessage: action.bound,
+            setCurrentFocus: action.bound,
+            setDarkMode: action.bound,
+            setDevice: action.bound,
+            setPromptHandler: action.bound,
+            setIsTradingAssessmentForNewUserEnabled: action.bound,
             toggleAccountsDialog: action.bound,
+            toggleOnScreenKeyboard: action.bound,
         });
     }
 
@@ -61,4 +66,13 @@ export default class UiStore {
     toggleAccountsDialog(status = !this.is_accounts_switcher_on) {
         this.is_accounts_switcher_on = status;
     }
+
+    toggleOnScreenKeyboard() {
+        this.is_onscreen_keyboard_active = this.current_focus !== null && this.is_mobile && isTouchDevice();
+    }
+
+    setCurrentFocus(value) {
+        this.current_focus = value;
+        this.toggleOnScreenKeyboard();
+    }
 }