[system] decomposeColor has null value when string has whitespace

[rdougan]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/blissful-fog-kc3xy8

decomposeColor('#aa0099 ');
// {"type":"rgba","values":[170,0,153,null]}

darken('#aa0099 ', 0.5);
// rgba(85, 0, 76, NaN)

Current behavior

Alpha value returned by decomposeColor is null when the color string passed has whitespace before/after value. Due to this, darken (and probably other functions) return NaN when calculating proper values.

Expected behavior

Trim whitespace, or give a warning in the console.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: decomposeColor darken NaN

[siriwatknp]

'#aa0099 ' is considered invalid color. You should trim the string first:

decomposeColor('#aa0099 '.trim())

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@rdougan How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[oliviertassinari]

I was curious to test how #43289 behaves on this. It's wrong too https://codesandbox.io/p/sandbox/divine-forest-k9wrgw?file=%2Fsrc%2FDemo.tsx%3A4%2C1, in its own way 😄.

It looks like we can improve the DX here by having a new error in dev mode only that warns when the input is not correct.