Text Field: Invalid keyframe value for property transform: translateX(0px) translateY(NaNpx) scale(NaN)

[Vladi-ed]

What is affected?

Component

Description

When I dynamically fill the value of the text Field component that is hidden, an exception happens:

Invalid keyframe value for property transform: translateX(0px) translateY(NaNpx) scale(NaN)

It happens on this line:
this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD });

Function animateLabelIfNeeded()

Reproduction

formField.style.display = 'none';
formField.value = "user";

see the console warning

Workaround

no workaround was found

By the way, formField.hidden = true doen't work, and does not hide the element at all.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

@material/web@2.3.0

Browser/OS/Node environment

Google Chrome Version 138.0.7204.4
OS: Windows 11, latest MacOS
Node v22.16.0
npm v11.4.1

[asyncLiz]

Can you give more info on your use case? Our text field doesn't support type="hidden" because it's too heavy of a component for a simple hidden input. We'd recommend using <input type="hidden"> instead for hidden input values.