fast
fast copied to clipboard
microsoft
fix: validation not respecting step attribute in fast-number-field
š Bug Report
When using fast-number-field, the validation mechanism always assumes a step value of 1 regardless of the specified step value. This makes it impossible to use the field for decimal inputs in a form without disabling validation altogether.
š» Repro or Code Sample
<!DOCTYPE html>
<html>
<head>
<title>FastUI Numeric Decimal Demo</title>
<style>
.field:invalid::before {
content: "Value is invalid";
}
</style>
</head>
<body>
<fast-number-field class="field" step="0.01" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
</body>
</html>
š¤ Expected Behavior
Entering the value 1.05 should not produce any validation error.
šÆ Current Behavior
Entering the value 1.05 sets the control state to invalid resulting in the text "Value is invalid" displaying. The CSS included in the sample displays this text only when the :invalid pseudo-selector applies to the control.
š Possible Solution
It appears that a proxy element is used for validation purposes here. However, none of the validation-affecting attributes such as step are passed to the element.
A mechanism to pass these attributes through to the proxy element, or possibly just using the actual created input as the proxy rather than a separate input element, could ensure that these attributes are respected.
š¦ Context
I'm trying to create a form that takes in a price. This needs to be a value containing up to 2 decimal places. However, currently, it's not possible to accept a price that is not an integer.
š Your Environment
- OS & Device: Windows 10 on PC
- Browser: Tested on Microsoft Edge and Mozilla Firefox
- Version: Latest available on CDN
I know something is wrong with Validate. However, I've never done TypeScript before and don't know how to deal with it now.
number-field.ts
public validate(): void {
try {
parseFloat(this.value);
} catch (e) {
super.setValidity(
this.proxy.validity,
this.proxy.validationMessage,
this.control
);
return;
}
const parsedValue = parseFloat(this.valueAsNumber.toString());
const validValue = isNaN(parsedValue) ? null : parsedValue;
if (validValue !== null) {
const step = this.step || 1;
const max = this.max !== undefined ? this.max : Number.MAX_VALUE;
const min = this.min !== undefined ? this.min : -Number.MAX_VALUE;
const modulo = (validValue - min) % step;
if (modulo !== 0) {
validValue - modulo + (modulo < step / 2 ? 0 : step);
}
if (validValue > max) {
super.setValidity(
this.proxy.validity,
this.proxy.validationMessage,
this.control
);
}
if (validValue < min) {
super.setValidity(
this.proxy.validity,
this.proxy.validationMessage,
this.control
);
}
}
}
I think we need an explicit version here - the fast-components package has been deprecated for a bit and the latest alpha has fixes for validation. Iād like to be able to pinpoint this and validate. Thanks!
