feat(Slider): Recognize localized number input

Assisted-by: Cursor

Fixes #12052

Author: rebeccaalpert

packages/react-core/src/components/Slider/Slider.tsx

@@ -7,7 +7,7 @@ import { TextInput } from '../TextInput';
 import { Tooltip, TooltipProps } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
-import { getLanguageDirection } from '../../helpers/util';
+import { formatLocalizedDecimal, getLanguageDirection, parseLocalizedDecimal } from '../../helpers/util';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -93,6 +93,8 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   thumbAriaValueText?: string;
   /** Current value of the slider.  */
   value?: number;
+  /** Locale string used for input formatting and parsing. See https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag for more information. */
+  locale?: string;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -126,13 +128,16 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   showBoundaries = true,
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
+  locale = 'en',
   ...props
 }: SliderProps) => {
   const sliderRailRef = useRef<HTMLDivElement>(undefined);
   const thumbRef = useRef<HTMLDivElement>(undefined);
+  const isInputFocusedRef = useRef(false);
 
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);
+  const [inputDisplayValue, setInputDisplayValue] = useState(() => formatLocalizedDecimal(inputValue, 'en'));
 
   let isRTL: boolean;
 
@@ -144,46 +149,103 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     setValue(value);
   }, [value]);
 
+  const updateInputDisplay = useCallback((numericValue: number) => {
+    setInputDisplayValue(formatLocalizedDecimal(numericValue, locale));
+  }, []);
+
+  const updateInputFromSliderValue = useCallback(
+    (numericValue: number) => {
+      setLocalInputValue(numericValue);
+      if (!isInputFocusedRef.current) {
+        updateInputDisplay(numericValue);
+      }
+    },
+    [updateInputDisplay]
+  );
+
+  const setLocalInputValueWithDisplay = useCallback<React.Dispatch<React.SetStateAction<number>>>(
+    (nextValue) => {
+      setLocalInputValue((previousValue) => {
+        const resolvedValue = typeof nextValue === 'function' ? nextValue(previousValue) : nextValue;
+
+        if (!isInputFocusedRef.current) {
+          updateInputDisplay(resolvedValue);
+        }
+
+        return resolvedValue;
+      });
+    },
+    [updateInputDisplay]
+  );
+
   useEffect(() => {
-    setLocalInputValue(inputValue);
-  }, [inputValue]);
+    if (!isInputFocusedRef.current) {
+      setLocalInputValue(inputValue);
+      updateInputDisplay(inputValue);
+    }
+  }, [inputValue, updateInputDisplay]);
 
   let diff = 0;
   let snapValue: number;
 
   // calculate style value percentage
   const stylePercent = ((localValue - min) * 100) / (max - min);
   const style = { [cssSliderValue.name]: `${stylePercent}%` } as React.CSSProperties;
-  const widthChars = useMemo(() => localInputValue.toString().length, [localInputValue]);
+  const widthChars = useMemo(() => inputDisplayValue.length || 1, [inputDisplayValue]);
   const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
   const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
-    const newValue = Number(value);
-    setLocalInputValue(newValue);
+    setInputDisplayValue(value);
+
+    const parsedValue = parseLocalizedDecimal(value, locale);
 
-    isInputLive && onChange && onChange(event, localValue, newValue, setLocalInputValue);
+    if (!Number.isNaN(parsedValue)) {
+      setLocalInputValue(parsedValue);
+      isInputLive && onChange && onChange(event, localValue, parsedValue, setLocalInputValueWithDisplay);
+    }
   };
 
   const handleKeyPressOnInput = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
       event.preventDefault();
+      const parsedValue = parseLocalizedDecimal(inputDisplayValue, locale);
+
+      if (!Number.isNaN(parsedValue)) {
+        setLocalInputValue(parsedValue);
+        updateInputDisplay(parsedValue);
+      }
+
       if (onChange) {
-        onChange(event, localValue, localInputValue, setLocalInputValue);
+        onChange(
+          event,
+          localValue,
+          Number.isNaN(parsedValue) ? localInputValue : parsedValue,
+          setLocalInputValueWithDisplay
+        );
       }
     }
   };
 
-  const onInputFocus = (e: any) => {
+  const onInputFocus = (e: React.SyntheticEvent<HTMLInputElement>) => {
     e.stopPropagation();
+    isInputFocusedRef.current = true;
   };
 
   const onThumbClick = () => {
     thumbRef.current.focus();
   };
 
   const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    isInputFocusedRef.current = false;
+
+    const parsedValue = parseLocalizedDecimal(inputDisplayValue, locale);
+    const resolvedInputValue = Number.isNaN(parsedValue) ? localInputValue : parsedValue;
+
+    setLocalInputValue(resolvedInputValue);
+    updateInputDisplay(resolvedInputValue);
+
     if (onChange) {
-      onChange(event, localValue, localInputValue, setLocalInputValue);
+      onChange(event, localValue, resolvedInputValue, setLocalInputValueWithDisplay);
     }
   };
 
@@ -240,8 +302,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (snapValue && !areCustomStepsContinuous) {
       thumbRef.current.style.setProperty(cssSliderValue.name, `${snapValue}%`);
       setValue(snapValue);
+      updateInputFromSliderValue(snapValue);
       if (onChange) {
-        onChange(e, snapValue);
+        onChange(e, snapValue, undefined, setLocalInputValueWithDisplay);
       }
     }
   };
@@ -308,16 +371,22 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     // Call onchange callback
+    const resolvedValue = snapValue !== undefined ? snapValue : newValue;
+    updateInputFromSliderValue(resolvedValue);
+
     if (onChange) {
-      if (snapValue !== undefined) {
-        onChange(e, snapValue);
-      } else {
-        onChange(e, newValue);
-      }
+      onChange(e, resolvedValue, undefined, setLocalInputValueWithDisplay);
     }
   };
 
-  const callbackThumbMove = useCallback(handleThumbMove, [min, max, customSteps, onChange]);
+  const callbackThumbMove = useCallback(handleThumbMove, [
+    min,
+    max,
+    customSteps,
+    onChange,
+    updateInputFromSliderValue,
+    setLocalInputValueWithDisplay
+  ]);
   const callbackThumbUp = useCallback(handleThumbDragEnd, [min, max, customSteps, onChange]);
 
   const handleThumbKeys = (e: React.KeyboardEvent) => {
@@ -373,8 +442,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (newValue !== localValue) {
       thumbRef.current.style.setProperty(cssSliderValue.name, `${newValue}%`);
       setValue(newValue);
+      updateInputFromSliderValue(newValue);
       if (onChange) {
-        onChange(e, newValue);
+        onChange(e, newValue, undefined, setLocalInputValueWithDisplay);
       }
     }
   };
@@ -383,8 +453,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     const textInput = (
       <TextInput
         isDisabled={isDisabled}
-        type="number"
-        value={localInputValue}
+        type="text"
+        inputMode="decimal"
+        value={inputDisplayValue}
         aria-label={inputAriaLabel}
         onKeyDown={handleKeyPressOnInput}
         onChange={onChangeHandler}

packages/react-core/src/components/Slider/__tests__/Slider.test.tsx

@@ -124,3 +124,24 @@ test('renders slider with thumbAriaValueText', () => {
 
   expect(slider).toHaveAttribute('aria-valuetext', 'Half capacity');
 });
+
+test('displays localized decimal separator based on language', () => {
+  render(<Slider value={50.2} isInputVisible inputValue={50.2} locale="de-DE" />);
+
+  expect(screen.getByRole('textbox', { name: 'Slider value input' })).toHaveValue('50,2');
+});
+
+test('accepts comma decimal input and normalizes on blur', async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+
+  render(<Slider value={50} isInputVisible inputValue={50} locale="de-DE" onChange={onChange} />);
+
+  const input = screen.getByRole('textbox', { name: 'Slider value input' });
+  await user.clear(input);
+  await user.type(input, '62,5');
+  await user.tab();
+
+  expect(input).toHaveValue('62,5');
+  expect(onChange).toHaveBeenLastCalledWith(expect.any(Object), 50, 62.5, expect.any(Function));
+});

packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap

@@ -65,7 +65,8 @@ exports[`slider renders continuous slider 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
-          type="number"
+          inputmode="decimal"
+          type="text"
           value="50"
         />
       </span>
@@ -259,7 +260,8 @@ exports[`slider renders discrete slider 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
-          type="number"
+          inputmode="decimal"
+          type="text"
           value="50"
         />
       </span>
@@ -431,7 +433,8 @@ exports[`slider renders slider with input 1`] = `
               data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
-              type="number"
+              inputmode="decimal"
+              type="text"
               value="50"
             />
           </span>
@@ -521,7 +524,8 @@ exports[`slider renders slider with input above thumb 1`] = `
                 data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
-                type="number"
+                inputmode="decimal"
+                type="text"
                 value="50"
               />
             </span>

packages/react-core/src/helpers/__tests__/util.test.ts

@@ -1,12 +1,15 @@
 import {
   capitalize,
+  formatLocalizedDecimal,
+  formatBreakpointMods,
+  getElementLocale,
   getUniqueId,
   debounce,
   isElementInView,
+  parseLocalizedDecimal,
   sideElementIsOutOfView,
   fillTemplate,
-  pluralize,
-  formatBreakpointMods
+  pluralize
 } from '../util';
 import { SIDE } from '../constants';
 import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
@@ -110,3 +113,16 @@ test('formatBreakpointMods', () => {
   expect(formatBreakpointMods({ md: 'spacerNone' }, styles)).toEqual('pf-m-spacer-none-on-md');
   expect(formatBreakpointMods({ default: 'column', lg: 'row' }, styles)).toEqual('pf-m-column pf-m-row-on-lg');
 });
+
+test('parseLocalizedDecimal accepts dot and comma decimal separators', () => {
+  expect(parseLocalizedDecimal('50.2', 'en')).toBe(50.2);
+  expect(parseLocalizedDecimal('50,2', 'es')).toBe(50.2);
+  expect(parseLocalizedDecimal('1.234,56', 'es')).toBe(1234.56);
+  expect(parseLocalizedDecimal('1,234.56', 'en')).toBe(1234.56);
+  expect(parseLocalizedDecimal('', 'en')).toBeNaN();
+});
+
+test('formatLocalizedDecimal uses locale decimal separator', () => {
+  expect(formatLocalizedDecimal(50.2, 'en-US')).toBe('50.2');
+  expect(formatLocalizedDecimal(50.2, 'de-DE')).toBe('50,2');
+});

packages/react-core/src/helpers/util.ts

@@ -590,3 +590,60 @@ export const getInlineStartProperty = (
   const widthProperty: 'offsetWidth' | 'clientWidth' | 'scrollWidth' = `${inlineType}Width`;
   return ancestorElement[widthProperty] - (targetElement[inlineProperty] + targetElement[widthProperty]);
 };
+
+/**
+ * Parses a decimal input string, accepting both comma and dot as the decimal separator.
+ * Given the locale, it discovers the locale's separators and integers using a reference value.
+ *
+ * @param {string} value - The input string to parse
+ * @param {string} locale - The locale string to use for parsing
+ * @returns {number} - The parsed number, or NaN if the input is not a valid number
+ */
+export const parseLocalizedDecimal = (value: string, locale: string): number => {
+  if (typeof value !== 'string' || !value.trim()) {
+    return NaN;
+  }
+
+  const formatter = new Intl.NumberFormat(locale);
+  const parts = formatter.formatToParts(12345.6);
+  const groupSymbol = parts.find((p) => p.type === 'group')?.value || ',';
+  const decimalSymbol = parts.find((p) => p.type === 'decimal')?.value || '.';
+
+  // in case of non-Arabic numerals
+  const digitParts = formatter.formatToParts(1234567890);
+  const localDigits = digitParts
+    .filter((p) => p.type === 'integer')
+    .map((p) => p.value)
+    .join('');
+  let normalizedString = value;
+  if (localDigits.length === 10 && localDigits !== '1234567890') {
+    const standardDigits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+    const digitMap = new Map();
+    [...localDigits].forEach((char, idx) => digitMap.set(char, standardDigits[idx]));
+    normalizedString = [...value].map((char) => digitMap.get(char) || char).join('');
+  }
+
+  const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  const cleaned = normalizedString
+    .replace(new RegExp(escapeRegex(groupSymbol), 'g'), '')
+    .replace(new RegExp(escapeRegex(decimalSymbol), 'g'), '.')
+    .replace(/[^0-9.-]/g, '');
+
+  return parseFloat(cleaned);
+};
+
+/**
+ * Formats a number using the decimal separator for the given locale.
+ *
+ * @param {number} value - The number to format
+ * @param {string} locale - The locale string to use for formatting
+ * @returns {string} - The formatted number string
+ */
+export const formatLocalizedDecimal = (value: number, locale: string): string => {
+  if (Number.isNaN(value)) {
+    return '';
+  }
+
+  return new Intl.NumberFormat(locale).format(value);
+};

packages/tsconfig.base.json

@@ -4,6 +4,7 @@
     "jsx": "react-jsx",
     "lib": [
       "es2015",
+      "es2018.intl",
       "dom"
     ],
     "target": "es2015",