TextInput loses masking upon uploading file in FileUpload

[thethunderturner]

Package

filament/filament

Package Version

v3.1.22

Laravel Version

10.37.3

Livewire Version

v3.3.0

PHP Version

8.2.13

Problem description

As the title says, when uploading the file the text input in the form loses it masking. For example, from "2,000" it goes to 2000.
The video below demonstrates the issue

2023-12-17_17-41-58.mp4

Expected behavior

The expected behavior is to remain in its masked state

Steps to reproduce

Add a numeric text input with a money mask with values > 1000, and after uploading a file, the TextInput will say 2000.

Reproduction repository

https://github.com/thethunderturner/TextInputBug

Relevant log output

No log output in this case

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[danharrin]

Please try reproducing it outside of Filament with Filepond and Alpine.js mask on a single page. I don't think this is anything we can fix in Filament.

[iniznet]

I believe I've faced a similar issue in the past, depending on how you use the $money magic, the mask either gets lost or breaks when I upload or delete an image from FileUpload.

Alpine.js will remask it when you either input or move out of focus from the input.

Tried to replicate the issue using just Filepond and Alpine.js mask on Codepen, and it seems to be working fine there. You can take a look at the Mask Bug Codepen for reference.

I'm wondering if this discrepancy is caused by filament keeping the raw value instead of the masked one?

[danharrin]

Have you tried a reproduction where the input is also using wire:model? There are definitely changes in behaviour there that I've seen before

[iniznet]

I haven't attempted it yet, it's a minor issue for me, so I don't go that far. I will try to when I have some time.

[zepfietje]

Have you been able to do any more digging, @thethunderturner @iniznet?

[thethunderturner]

Have you been able to do any more digging, @thethunderturner @iniznet?

Hey, I havent had time yet, but I can look at it next week :)