[number field] Fix formatter locale cache (#4999)

Author: atomiks

packages/react/src/internals/filter.test.ts

@@ -0,0 +1,11 @@
+import { expect } from 'vitest';
+import { getFilter } from './filter';
+
+describe('getFilter', () => {
+  it('caches different Intl.Locale objects separately', () => {
+    const filter1 = getFilter({ locale: new Intl.Locale('fr-FR') });
+    const filter2 = getFilter({ locale: new Intl.Locale('en-US') });
+
+    expect(filter1).not.toBe(filter2);
+  });
+});

packages/react/src/internals/filter.ts

@@ -1,4 +1,5 @@
 import { stringifyAsLabel } from './resolveValueLabel';
+import { stringifyLocale } from '../utils/stringifyLocale';
 
 const filterCache = new Map<string, Filter>();
 
@@ -63,16 +64,6 @@ export function getFilter(options: GetFilterParameters = {}): Filter {
   return filter;
 }
 
-function stringifyLocale(locale?: Intl.LocalesArgument): string {
-  if (Array.isArray(locale)) {
-    return locale.map((value) => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
-
 export interface GetFilterParameters extends Intl.CollatorOptions {
   /**
    * The locale to use for string comparison.

packages/react/src/utils/formatNumber.test.ts

@@ -15,6 +15,15 @@ describe('NumberField format', () => {
       const formatter2 = getFormatter(undefined, getOptions());
       expect(formatter1).toBe(formatter2);
     });
+
+    it('caches different Intl.Locale objects separately', () => {
+      const formatter1 = getFormatter(new Intl.Locale('fr-FR'), getOptions());
+      const formatter2 = getFormatter(new Intl.Locale('en-US'), getOptions());
+
+      expect(formatter1).not.toBe(formatter2);
+      expect(formatter1.resolvedOptions().locale).toBe('fr-FR');
+      expect(formatter2.resolvedOptions().locale).toBe('en-US');
+    });
   });
 
   describe('formatNumber', () => {

packages/react/src/utils/formatNumber.ts

@@ -1,7 +1,9 @@
+import { stringifyLocale } from './stringifyLocale';
+
 export const cache = new Map<string, Intl.NumberFormat>();
 
 export function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions) {
-  const optionsString = JSON.stringify({ locale, options });
+  const optionsString = JSON.stringify({ locale: stringifyLocale(locale), options });
   const cachedFormatter = cache.get(optionsString);
 
   if (cachedFormatter) {

packages/react/src/utils/stringifyLocale.test.ts

@@ -0,0 +1,11 @@
+import { expect } from 'vitest';
+import { stringifyLocale } from './stringifyLocale';
+
+describe('stringifyLocale', () => {
+  it('stringifies Intl locale arguments for cache keys', () => {
+    expect(stringifyLocale()).toBe('');
+    expect(stringifyLocale('en-US')).toBe('en-US');
+    expect(stringifyLocale(new Intl.Locale('fr-FR'))).toBe('fr-FR');
+    expect(stringifyLocale(['fr-FR', new Intl.Locale('en-US')])).toBe('fr-FR,en-US');
+  });
+});

packages/react/src/utils/stringifyLocale.ts

@@ -0,0 +1,11 @@
+export function stringifyLocale(locale?: Intl.LocalesArgument): string {
+  if (Array.isArray(locale)) {
+    return locale.map((value) => stringifyLocale(value)).join(',');
+  }
+
+  if (locale == null) {
+    return '';
+  }
+
+  return String(locale);
+}