chore: fix for persist force value selection after change of order type (#1779)

* chore: fix for persist force value selection after change of order type

* chore: fix for persist force value selection after change of order type fix some int test

* chore: fix for persist force value selection after change of order fast fixes

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts

@@ -326,6 +326,26 @@ describe('limit order validations', { tags: '@smoke' }, () => {
         );
       });
     });
+
+    it('selections should be remembered', () => {
+      cy.getByTestId(orderTIFDropDown).select('TIME_IN_FORCE_GTT');
+      cy.getByTestId(toggleMarket).click();
+      cy.get(`[data-testid=${orderTIFDropDown}] option:selected`).should(
+        'have.text',
+        TIFlist.filter((item) => item.code === 'IOC')[0].text
+      );
+      cy.getByTestId(orderTIFDropDown).select('TIME_IN_FORCE_FOK');
+      cy.getByTestId(toggleLimit).click();
+      cy.get(`[data-testid=${orderTIFDropDown}] option:selected`).should(
+        'have.text',
+        TIFlist.filter((item) => item.code === 'GTT')[0].text
+      );
+      cy.getByTestId(toggleMarket).click();
+      cy.get(`[data-testid=${orderTIFDropDown}] option:selected`).should(
+        'have.text',
+        TIFlist.filter((item) => item.code === 'FOK')[0].text
+      );
+    });
   });
 });
 

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -45,7 +45,6 @@ export const DealTicket = ({
     handleSubmit,
     watch,
     formState: { errors },
-    setValue,
   } = useForm<OrderSubmissionBody['orderSubmission']>({
     mode: 'onChange',
     defaultValues: getDefaultOrder(market),
@@ -100,17 +99,7 @@ export const DealTicket = ({
         name="type"
         control={control}
         render={({ field }) => (
-          <TypeSelector
+          <TypeSelector value={field.value} onSelect={field.onChange} />
-            value={field.value}
-            onSelect={(type) => {
-              if (type === OrderType.TYPE_LIMIT) {
-                setValue('timeInForce', OrderTimeInForce.TIME_IN_FORCE_GTC);
-              } else {
-                setValue('timeInForce', OrderTimeInForce.TIME_IN_FORCE_IOC);
-              }
-              field.onChange(type);
-            }}
-          />
         )}
       />
       <Controller

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { FormGroup, Select } from '@vegaprotocol/ui-toolkit';
 import { Schema } from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/react-helpers';
@@ -28,11 +29,23 @@ export const timeInForceLabel = (tif: string) => {
   }
 };
 
+type PossibleOrderKeys = Exclude<
+  Schema.OrderType,
+  Schema.OrderType.TYPE_NETWORK
+>;
+type PrevSelectedValue = {
+  [key in PossibleOrderKeys]: Schema.OrderTimeInForce;
+};
+
 export const TimeInForceSelector = ({
   value,
   orderType,
   onSelect,
 }: TimeInForceSelectorProps) => {
+  const [prevValue, setPrevValue] = useState<PrevSelectedValue>({
+    [Schema.OrderType.TYPE_LIMIT]: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+    [Schema.OrderType.TYPE_MARKET]: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+  });
   const options =
     orderType === Schema.OrderType.TYPE_LIMIT
       ? Object.entries(Schema.OrderTimeInForce)
@@ -41,13 +54,21 @@ export const TimeInForceSelector = ({
             timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_FOK ||
             timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
         );
-
+  useEffect(() => {
+    onSelect(prevValue[orderType as PossibleOrderKeys]);
+  }, [onSelect, prevValue, orderType]);
   return (
     <FormGroup label={t('Time in force')} labelFor="select-time-in-force">
       <Select
         id="select-time-in-force"
         value={value}
-        onChange={(e) => onSelect(e.target.value as Schema.OrderTimeInForce)}
+        onChange={(e) => {
+          const selectedValue = e.target.value as Schema.OrderTimeInForce;
+          setPrevValue({
+            ...prevValue,
+            [orderType]: selectedValue,
+          });
+        }}
         className="w-full"
         data-testid="order-tif"
       >