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);