Different behavior with Preact on a basic React Material use case (plain TextField)

[krskrs]

• Check if updating to the latest Preact version resolves the issue: No

Describe the bug

Steps to reproduce the behavior: (code sandbox below)

I believe I've found a difference with react on a simple React Material UI library use case.

I noticed that in a plain TextBox with a placeholder, the placeholder text and the label overlap when the input gets focus.

Looking further into it I believe I've pinpointed the issue in the data-shrink attribute dynamically set to the label element on getting/losing focus. It looks like Preact is not rendering the data-shrink attribute when its value is false, while it does when it's true. This causes some styles to not be correctly applied and thus the overlap. On React, on the contrary, bot values of the attribute are rendered in the DOM.

https://codesandbox.io/s/late-water-50w2lg?file=/src/index.js PS I've used a class component because the template I found used it, but the same happens with functional components as well

Here the data-shrink attribute is missing, while it should be rendered and set to false, for the style rule to kick-in and hide the label.

This is on React:

I've reported this in case there is something which prevents Preact from rendering that attribute when its value is false. Or if the wrong behavior is due to different root causes, maybe I can also file an issue on their repository.

This should be the relevant part on MUI's code:
https://github.com/mui/material-ui/blob/af3cb56bfc9baa48fa0489f4e1277547d286a887/packages/mui-material/src/InputLabel/InputLabel.js#L119

Thank you and keep up the good work with Preact!

[developit]

We might want to consider replacing the aria- prefix handling with a simpler dash handling: if a prop name has a dash and is being set as an attribute, don't remove the attribute when the value is false.