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.

[ejmurc]

I'm having the same issue in my Chrome Extension.

It occurs in three cases:

• When the input has a selected field assigned while it's parent container is set to display: none.

<md-filled-select label="Sort Comments">
  <md-select-option value="top" selected>
    <div slot="headline">Top Voted</div>
  </md-select-option>
  <md-select-option value="trending">
    <div slot="headline">Trending</div>
  </md-select-option>
  <md-select-option value="recent">
    <div slot="headline">Recent</div>
  </md-select-option>
</md-filled-select>

• When the input's value is set manually while it's parent container is set to display: none.
• When the input's animation is still completing and the parent container is set to display: none.

It will result in the same error printed:

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