diff --git a/UNRELEASED.md b/UNRELEASED.md index 594a480d6c4..251b7aed9ca 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,6 +6,9 @@ ### Bug fixes +- Fixed `TextField` to no longer render `aria-invalid="false"` ([#2282](https://github.com/Shopify/polaris-react/pull/2282)) +- Fixed `TextField` to only render `min` ,`max` and `step` attributes when explicitly passed ([#2282](https://github.com/Shopify/polaris-react/pull/2282)) + ### Documentation ### Development workflow diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 710c2b6bf7c..9d7610f3fc8 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -144,11 +144,11 @@ export function TextField({ name, id: idProp, role, - step = 1, + step, autoComplete, - max = Infinity, + max, maxLength, - min = -Infinity, + min, minLength, pattern, spellCheck, @@ -183,6 +183,11 @@ export function TextField({ const normalizedValue = value != null ? value : ''; const {unstableGlobalTheming = false} = useFeatures(); + + const normalizedStep = step != null ? step : 1; + const normalizedMax = max != null ? max : Infinity; + const normalizedMin = min != null ? min : -Infinity; + const className = classNames( styles.TextField, Boolean(normalizedValue) && styles.hasValue, @@ -268,16 +273,16 @@ export function TextField({ // Making sure the new value has the same length of decimal places as the // step / value has. - const decimalPlaces = Math.max(dpl(numericValue), dpl(step)); + const decimalPlaces = Math.max(dpl(numericValue), dpl(normalizedStep)); const newValue = Math.min( - Number(max), - Math.max(numericValue + steps * step, Number(min)), + Number(normalizedMax), + Math.max(numericValue + steps * normalizedStep, Number(normalizedMin)), ); onChange(String(newValue.toFixed(decimalPlaces)), id); }, - [id, max, min, onChange, step, value], + [id, normalizedMax, normalizedMin, onChange, normalizedStep, value], ); const handleButtonRelease = useCallback(() => {