Bug: Cannot set currency field value to `null` if the value was set to `0.0` before

[doefom]

Description

Setting the currency field value to null doesn't work if the value was previously set to 0.0. This can be problematic as users may want to nullify or reset the field value, but they are unable to do so. However, nullifying any other value works as expected.

Further information

Debugging showed that the process method does receive the value "0.00" instead of null after nullifying the field when the value was set to 0.0 before. This issue might be related to the use of an input mask.

Steps to reproduce

1. Set the currency field value to 0.0 and save the entry.
2. Attempt to set the currency field value to null afterwards and hit save.
3. Observe that the value doesn't change and remains 0.0.

Expected behavior

When the user sets the value to null the field value should reflect the null value.

Actual behavior

The currency field value remains 0.0 and doesn't allow for nullification.

[caseydwyer]

@doefom possible that you had a default_value on the config, when you discovered this?

[doefom]

@caseydwyer yes, I indeed had a default value on the field. However, the default was not 0.0 and in my case should have defaulted back to 12.0. Does this change anything?

[caseydwyer]

Hmmm...possibly, that's kinda weird and I don't have an explanation for exactly what you're seeing, there, with it using a different value. That's probably worth looking into. But I'm not able to reproduce this without a default_value in the config, which makes me think it's at least loosely related to the counter-intuitive (IMHO) label on default fields. See this PR for more context than you could ever want. 😂

[caseydwyer]

Yeah, so that ☝ is definitely playing a role, here...but there's something unique/specific to having 0 as the initial amount. Thinking it's maybe related to the Vue component, though, because the request still shows zeroes. Screenshot below shows request, when the Amount field was previously set to 0, made empty, and then saved. Investigating that now. 🕵️‍♂️

[caseydwyer]

Yep, confirmed it's in the Vue component—and more specifically, it has something to do with the masking library you've got in that component. When I remove it (ie, temporarily delete all the mounted goodies), everything works as expected, albeit without masking. It's very odd, because the field is empty, doing a check via getElementById returns an empty string...but then Vue doesn't seem to be aware that the value was cleared out, hence the 0 value being sent in the update request.

Clearing the field from any non-zero number works exactly as expected (ie, based on the way Statamic handles default values; see above link). It's only when you're going from 0 to null. Only thing I can think of, is that the mask is maybe/somehow interfering with Vue detecting that change, due to the mask putting in 0.00 itself? I honestly have no idea; seems like a weird edge-case. 🤷‍♂️

[doefom]

Thanks for looking into it! Had a feeling it might be related to the input mask we're using. Will try to fix the issue when deleting the 0.0 value. If that doesn't work, maybe introduce some sort of reset button? Although that's the uglier way, we'll see.