diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx
index 9c089b66a683..b68b15f34353 100644
--- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx
+++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx
@@ -8,7 +8,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
{isDays ? (
-
+
@@ -34,7 +34,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
-
+
diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx
index 370191f388b9..74f91a193e49 100644
--- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx
+++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx
@@ -13,7 +13,7 @@ const chips_options = [
name: ,
},
{
- name: ,
+ name: ,
},
];
const BarrierInput = observer(
@@ -28,7 +28,13 @@ const BarrierInput = observer(
}) => {
const { barrier_1, onChange, validation_errors, tick_data, setV2ParamsInitialValues } = useTraderStore();
const [option, setOption] = React.useState(0);
+ const [should_show_error, setShouldShowError] = React.useState(false);
+ const [is_focused, setIsFocused] = React.useState(false);
const { pip_size } = tick_data ?? {};
+ const barrier_ref = React.useRef(null);
+ const show_hidden_error =
+ validation_errors?.barrier_1.length > 0 &&
+ ((barrier_1 && !['+', '-'].includes(barrier_1)) || should_show_error);
React.useEffect(() => {
setInitialBarrierValue(barrier_1);
@@ -43,6 +49,26 @@ const BarrierInput = observer(
onChange({ target: { name: 'barrier_1', value: barrier_1 } });
}, []);
+ React.useEffect(() => {
+ const barrier_element = barrier_ref.current;
+ const checkFocus = () => {
+ setIsFocused(!!(barrier_element && barrier_element.contains(document.activeElement)));
+ };
+ document.addEventListener('focusin', checkFocus);
+ document.addEventListener('focusout', checkFocus);
+
+ return () => {
+ document.removeEventListener('focusin', checkFocus);
+ document.removeEventListener('focusout', checkFocus);
+ };
+ });
+
+ React.useEffect(() => {
+ if (is_focused) {
+ setShouldShowError(false);
+ }
+ }, [is_focused]);
+
const handleChipSelect = (index: number) => {
setOption(index);
let newValue = barrier_1.replace(/^[+-]/, '');
@@ -94,11 +120,7 @@ const BarrierInput = observer(
customType='commaRemoval'
name='barrier_1'
noStatusIcon
- status={
- validation_errors?.barrier_1.length > 0 && barrier_1 !== ''
- ? 'error'
- : 'neutral'
- }
+ status={show_hidden_error ? 'error' : 'neutral'}
value={barrier_1}
allowDecimals
decimals={pip_size}
@@ -109,7 +131,8 @@ const BarrierInput = observer(
onChange={handleOnChange}
placeholder={localize('Price')}
variant='fill'
- message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
+ message={show_hidden_error ? validation_errors?.barrier_1[0] : ''}
+ ref={barrier_ref}
/>
) : (
0 && barrier_1 !== ''
- ? 'error'
- : 'neutral'
- }
+ status={show_hidden_error ? 'error' : 'neutral'}
onChange={handleOnChange}
placeholder={localize('Distance to spot')}
regex={/[^0-9.,]/g}
variant='fill'
- message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
+ message={show_hidden_error ? validation_errors?.barrier_1[0] : ''}
+ ref={barrier_ref}
/>
)}
- {(validation_errors?.barrier_1.length == 0 || barrier_1 === '') && (
+ {(validation_errors?.barrier_1.length == 0 || !show_hidden_error) && (
)}
@@ -155,6 +175,8 @@ const BarrierInput = observer(
onAction: () => {
if (validation_errors.barrier_1.length === 0) {
onClose(true);
+ } else {
+ setShouldShowError(true);
}
},
}}
diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx
index 90ad341e3b62..2290661d42e7 100644
--- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx
+++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx
@@ -27,7 +27,9 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
const [is_open, setIsOpen] = React.useState(false);
const [initialBarrierValue, setInitialBarrierValue] = React.useState('');
const isDays = duration_unit == 'd';
- const has_error = validation_errors.barrier_1.length > 0 || proposal_info?.[trade_type_tab]?.has_error;
+ const has_error =
+ validation_errors.barrier_1.length > 0 ||
+ (proposal_info?.[trade_type_tab]?.has_error && proposal_info?.[trade_type_tab]?.error_field === 'barrier');
const { addSnackbar } = useSnackbar();
const [barrier_error_shown, setBarrierErrorShown] = React.useState(false);