Bug - Truncate - innerRef is being passed to the DOM

[kingsleyzissou]

Describe the problem

There seems to be an issue with the innerRef for the TruncateBase/Truncate component and I am getting errors that are causing a cockpit plugin to crash on startup. I have included the relevant portion of the stack trace below:

Warning: React does not recognize the `innerRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `innerref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at span
    at TruncateBase (

How do you reproduce the problem?
Weirdly, this issue is only happening inside a cockpit environment so it's quite hard to reproduce. I have checked and we have not upgraded to React 19 yet either, so the forwardRef should still be supported.

Expected behavior
For the truncation element to truncate the string and not cause the plugin to crash

Is this issue blocking you?
This is not blocking us. Since we don't need the popover of the Truncate component at the moment, we are just using vanilla javascript to truncate the string.

Screenshots
N/A

What is your environment?

• OS: RHEL/MacOS (plugin is in a vm with port exposed)
• Browser: Chromium (Arc)
• Version: 1.99.0

What is your product and what release date are you targeting?
We are running a plugin inside the cockpit environment (cockpit-image-builder). We also have a frontend
for console dot.

Any other information?

[kingsleyzissou]

Interestingly, we're getting it in our test-suite too:
osbuild/image-builder-frontend#3540