fast icon indicating copy to clipboard operation
fast copied to clipboard

fix: Setting value on disabled NumberField throws exception

Open atmgrifter00 opened this issue 3 years ago • 1 comments

🐛 Bug Report

If you simply change a fast-number-field (or some other component derived from fast-foundation NumberField) to be disabled, and set its value to a fractional value (e.g. 0.5), you will see the following exception be thrown in the console debugger:

Uncaught TypeError: Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.

Digging into a bit, the stepMismatch validation flag is getting set, but no message is provided. Note that I don't believe the flag should be set at all.

Note that the native input (when type = number) does not suffer from this issue.

💻 Repro or Code Sample

<fast-number-field disabled value="0.5"></fast-number-field>

If you go to https://explore.fast.design/components/fast-number-field, and simply paste in the above line, you will see the error in the console. Additionally, you will see that the number-field isn't populated with the value. If you remove the disabled attribute the problem goes away.

🤔 Expected Behavior

Primarily, no exception should be thrown from the number-field when setting its value to any valid number (regardless of the disabled setting).

😯 Current Behavior

The disabled state changes whether or not the NumberField accepts a particular fractional value.

💁 Possible Solution

I suppose this issue could be caught (and ignored) in a try/catch block, but that doesn't seem ideal.

🔦 Context

We had to work around this issue in a Blazor app, because the exception was triggering the error handling logic, and instead we had to avoid using the disabled attribute, and style it and disable it via CSS (which is yucky).

atmgrifter00 avatar May 06 '22 16:05 atmgrifter00

This looks like a FormAssociated issue. ElementInternals.setValidity is being called with a validity object from the native input, but the interface signatures are not completely compatible: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity vs https://developer.mozilla.org/en-US/docs/Web/API/ValidityState. It seems the valid flag is true in the example provided, which seems to be the source of the error.

FormAssociated should be adjusted to only invoke .setValidity with accepted values w/ no extranious values.

nicholasrice avatar May 06 '22 17:05 nicholasrice

Unfortunately @microsoft/fast-components has been deprecated for some time.

janechu avatar May 29 '24 03:05 janechu