fix(admin-ui): Prevent comma decimal separator from converting inputs to NaN (#5566)

**What**
- Using the Price List bulk editor with a locale that uses comma as the decimal separator would convert decimal numbers to NaN. This PR fixes that by replacing commas with dots, before passing the values on to the state manager.

Closes #5565
This commit is contained in:
Kasper Fabricius Kristensen authored and GitHub committed 2023-11-06 13:26:35 +00:00
1 parent 0c9216c225
commit d7e1887221
2 files changed
+9 -4

No files matched your search

@@ -1511,7 +1511,7 @@ const PriceListProductPricesForm = ({
ref={tableRef}
>
<thead>
<tr className="[&_th]:txt-compact-small-plus text-ui-fg-subtle [&_th]:border-ui-border-base h-10 [&_th]:min-w-[220px] [&_th]:border-r [&_th]:border-b [&_th:last-of-type]:border-r-0">
<tr className="[&_th]:txt-compact-small-plus text-ui-fg-subtle [&_th]:border-ui-border-base h-10 [&_th:last-of-type]:border-r-0 [&_th]:min-w-[220px] [&_th]:border-b [&_th]:border-r">
<th className="max-w-[220px] text-left">
<div className="px-4 py-2.5">
{t(
@@ -1586,7 +1586,7 @@ const PriceListProductPricesForm = ({
</tr>
</thead>
<tbody>
<tr className="bg-ui-bg-subtle h-10 [&_td:last-of-type]:border-r-0 [&_td]:border-r [&_td]:border-b">
<tr className="bg-ui-bg-subtle h-10 [&_td:last-of-type]:border-r-0 [&_td]:border-b [&_td]:border-r">
<td className="w-[220px] max-w-[220px]">
<div className="grid w-[220px] grid-cols-[16px_1fr] gap-x-3 overflow-hidden px-4 py-2.5">
<div className="bg-ui-bg-component h-[22px] w-4 rounded-[4px]">
@@ -1828,7 +1828,7 @@ const Cell = React.forwardRef<HTMLInputElement, CellProps>(
*/
const formattedValue = strippedValue
? formatValue({
value: strippedValue,
value: strippedValue.replace(/,/g, "."), // If the current locale uses commas as decimal separators, then we need to replace them with dots.
decimalScale: decimalScale ?? 0,
disableGroupSeparators: true,
})
@@ -2138,7 +2138,7 @@ const Cell = React.forwardRef<HTMLInputElement, CellProps>(
{borders.bottom && borders.right && (
<div
onMouseDown={onDragToFillStart}
className="bg-ui-bg-interactive absolute -right-1 -bottom-1 z-50 h-2 w-2 cursor-crosshair rounded-full"
className="bg-ui-bg-interactive absolute -bottom-1 -right-1 z-50 h-2 w-2 cursor-crosshair rounded-full"
/>
)}
</td>