fix: respect number format in currency input (#18469)
Fixed #18355 Currency fields ignored the workspace number format when editing: display showed e.g. 5 982,77 € (French style) but the input forced US style (5,982.77) and rejected comma as decimal. Fix: CurrencyInput now uses useNumberFormat() and passes the correct thousandsSeparator and radix to the IMask input so edit mode matches the chosen format (comma/space, dot/comma, etc.). Files: CurrencyInput.tsx (use format for mask), new CurrencyInput.test.tsx . --------- Co-authored-by: root <root@dragon.second> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
@@ -3,12 +3,14 @@ import { styled } from '@linaria/react';
|
||||
import { useContext, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
|
||||
import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
|
||||
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
|
||||
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
|
||||
import { type Currency } from '@/ui/input/components/internal/types/Currency';
|
||||
import { IMaskInput } from 'react-imask';
|
||||
import { type IconComponent } from 'twenty-ui/display';
|
||||
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
import { getSeparatorsForNumberFormat } from '~/utils/format/getSeparatorsForNumberFormat';
|
||||
|
||||
export const StyledIMaskInput = styled.div`
|
||||
display: contents;
|
||||
@@ -87,9 +89,13 @@ export const CurrencyInput = ({
|
||||
}: CurrencyInputProps) => {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
const [internalText, setInternalText] = useState(value);
|
||||
const { numberFormat } = useNumberFormat();
|
||||
|
||||
const wrapperRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { thousandsSeparator, radix } =
|
||||
getSeparatorsForNumberFormat(numberFormat);
|
||||
|
||||
const handleChange = (value: string) => {
|
||||
setInternalText(value);
|
||||
onChange?.(value);
|
||||
@@ -132,8 +138,8 @@ export const CurrencyInput = ({
|
||||
<StyledIMaskInput>
|
||||
<IMaskInput
|
||||
mask={Number}
|
||||
thousandsSeparator=","
|
||||
radix="."
|
||||
thousandsSeparator={thousandsSeparator}
|
||||
radix={radix}
|
||||
scale={decimals}
|
||||
onAccept={(value: string) => handleChange(value)}
|
||||
inputRef={wrapperRef}
|
||||
|
||||
Reference in New Issue
Block a user