[GRWT]fix: add limit to tp and sl field same as prod behavior (deriv-com#17734)

* fix: add limit to tp and sl field same as prod behavior

* fix: added test case for the changes

* fix: fix the scnario for mobile

* fix: detect decimal keys  for mobile

* test: add console log

* fix: add regex to identify the decimal

* fix: code to debug

* fix: handled the decimal in mobile for tp and al

* fix: added onKeyPress to detect period key

* fix: handle numeric key condition for andriod phones

Author: vinu-deriv

packages/trader/src/AppV2/Components/TradeParameters/RiskManagement/__tests__/take-profit-and-stop-loss-input.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mockStore } from '@deriv/stores';
 import ModulesProvider from 'Stores/Providers/modules-providers';
@@ -90,46 +90,56 @@ describe('TakeProfitAndStopLossInput', () => {
         expect(screen.getByText(accu_content)).toBeInTheDocument();
     });
 
-    it('should call focusAndOpenKeyboard, when ToggleSwitch is switched to true.', () => {
+    it('should call focusAndOpenKeyboard, when ToggleSwitch is switched to true.', async () => {
         const mockFocusAndOpenKeyboard = jest.spyOn(utils, 'focusAndOpenKeyboard');
         mockTakeProfitAndStopLossInput();
 
         const toggle_switcher = screen.getAllByRole('button')[0];
-        userEvent.click(toggle_switcher);
+        await userEvent.click(toggle_switcher);
         expect(mockFocusAndOpenKeyboard).toBeCalledTimes(1);
     });
 
-    it('should call focusAndOpenKeyboard, when user clicks on Take Profit overlay.', () => {
+    it('should call focusAndOpenKeyboard, when user clicks on Take Profit overlay.', async () => {
         const mockFocusAndOpenKeyboard = jest.spyOn(utils, 'focusAndOpenKeyboard');
         mockTakeProfitAndStopLossInput();
 
         const take_profit_overlay = screen.getByTestId('dt_take_profit_overlay');
-        userEvent.click(take_profit_overlay);
+        await userEvent.click(take_profit_overlay);
 
         expect(mockFocusAndOpenKeyboard).toBeCalledTimes(1);
     });
 
-    it('should render take profit overlay if ToggleSwitch was switched to false', () => {
+    it('should render take profit overlay if ToggleSwitch was switched to false', async () => {
         default_mock_store.modules.trade.has_take_profit = true;
         default_mock_store.modules.trade.take_profit = '5';
         mockTakeProfitAndStopLossInput();
 
         expect(screen.queryByTestId('dt_take_profit_overlay')).not.toBeInTheDocument();
         const toggle_switcher = screen.getAllByRole('button')[0];
-        userEvent.click(toggle_switcher);
+        await userEvent.click(toggle_switcher);
 
         expect(screen.getByTestId('dt_take_profit_overlay')).toBeInTheDocument();
     });
 
-    it('should call onChangeMultiple when user click on Save button, if there are no API errors', () => {
+    it('should call onChangeMultiple when user click on Save button, if there are no API errors', async () => {
         default_mock_store.modules.trade.has_take_profit = true;
         default_mock_store.modules.trade.take_profit = '5';
         mockTakeProfitAndStopLossInput();
 
-        userEvent.type(screen.getByTestId(tp_data_testid), '2');
+        await userEvent.type(screen.getByTestId(tp_data_testid), '2');
         const save_button = screen.getByText('Save');
-        userEvent.click(save_button);
+        await userEvent.click(save_button);
 
         expect(default_mock_store.modules.trade.onChangeMultiple).toBeCalled();
     });
+
+    it('should have max length of 10 for take profit input when currency is USD', async () => {
+        default_mock_store.modules.trade.has_take_profit = true;
+        default_mock_store.modules.trade.take_profit = '5';
+        mockTakeProfitAndStopLossInput();
+        const input_field = screen.getByTestId(tp_data_testid);
+        await userEvent.type(input_field, '12345678901');
+
+        expect(input_field).toHaveValue('5123456789');
+    });
 });

packages/trader/src/AppV2/Components/TradeParameters/RiskManagement/take-profit-and-stop-loss-input.tsx

@@ -71,6 +71,7 @@ const TakeProfitAndStopLossInput = ({
     const [new_input_value, setNewInputValue] = React.useState(is_take_profit_input ? take_profit : stop_loss);
     const [error_text, setErrorText] = React.useState('');
     const [fe_error_text, setFEErrorText] = React.useState(initial_error_text ?? message ?? '');
+    const [max_length, setMaxLength] = React.useState(10);
 
     // Refs for handling focusing and bluring input
     const input_ref = React.useRef<HTMLInputElement>(null);
@@ -283,6 +284,17 @@ const TakeProfitAndStopLossInput = ({
                     unitLeft={currency_display_code}
                     variant='fill'
                     value={new_input_value ?? ''}
+                    onBeforeInput={(e: React.FormEvent<HTMLInputElement>) => {
+                        if (
+                            ['.', ','].includes((e.nativeEvent as InputEvent)?.data ?? '') &&
+                            (new_input_value?.length ?? 0) <= 10
+                        ) {
+                            setMaxLength(decimals ? 11 + decimals : 10);
+                        } else if (!new_input_value?.includes('.')) {
+                            setMaxLength(10);
+                        }
+                    }}
+                    maxLength={max_length}
                 />
                 {!is_enabled && (
                     <button