Calendar: Changing Calendar input (with mask) clears the rest of the form's state

[freiguy1]

Describe the bug

Our users noticed when manually typing in a date in a Calendar input box, the rest of the state of the form gets cleared out.

For example, the codesandbox link has 2 inputs. One is text, and one is a Calendar. If you have some text in the InputText, then start typing in the Calendar, your InputText gets cleared out.

One thing to notice is all the inputs' states are wrapped in an object, rather than each being their own useState:
var [form, setForm] = useState({ text: "", date: undefined });

Another important note: This problem only manifests when using the mask attribute on the Calendar. If you remove mask this problem goes away and behavior is as expected.

Reproducer

https://codesandbox.io/s/calendar-mask-problem-qxungp?file=/src/index.js

PrimeReact version

8.7.3

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Inside the codesandbox example:

1. Simply type something into the first input text box
2. Then tab or click into calendar input box
3. Start typing a date by pressing a number (like 1)
4. Notice the text you initially entered in first text box is deleted

Expected behavior

I expect the text in the InputText to not be deleted.

[melloware]

Similar mask related issues:

#3728

#3628

[cxo05]

Using

onChange={(e) => {
  setForm((prevState) => {
    return { ...prevState, date: e.value };
  });
}}

Instead of

onChange={(e) => {
  setForm({...form, date: e.value});
}}

in the calendar component has different behaviour even though they should be doing the same thing.

Issue seems to be related to how the mask changes the calendar's bindings (or doesn't)