Material-ui: Typescript 3.2 bug: FormControl component="fieldset" not valid

[jadbox]

Typescript 3.2.1:

<FormControl component="fieldset" className={classes.formControl}>

[ts] Type '"fieldset"' is not assignable to type '"object" | "ruby" | "table" | "small" | "sub" | "embed" | "caption" | "menu" | "menuitem" | "meter" | "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "big" | "blockquote" | ... 62 more ... | undefined'. [2322]

[eps1lon]

That's an issue with @types/react and possibly an issue with typescript since they changed how they create their DOM declarations.

typescript@^3.2.0 introduced breaking changes in their minor upgrade (https://blogs.msdn.microsoft.com/typescript/2018/11/29/announcing-typescript-3-2/) so it might be hard for us to support both <3.2 and ^3.2 without to much overhead.

[eps1lon]

DefinitelyTyped/DefinitelyTyped#30764 improved typechecking for React.ReactType which bites us here since our typings only support additional props that are assignable to the div element (which is the default for FormControl). However fieldset has some additional attributes and that's why the compiler is (rightfully) complaining.

Defeat device:

<FormControl component={"fieldset" as "div"} className="hello-world" />

Perfectly safe at runtime since every attribute for div is a valid attribute for fieldset.

This is currently a limitation of our typings. With v4 we definitely plan to make our props are generic which should resolve those issues at the cost of an additional requirement in the form of explicitly typed callbacks.

I'm going to add a test case where we expect an error so that we're reminded once this get's fixed.

[eps1lon]

@jadbox Just wanted to add that fieldset is not really that useful since it should be used to group inputs. However FormControl only supports a single input to begin with so fieldset doesn't add that much markup semantics.

[jadbox]

@eps1lon Thanks for the heads up, I'd recommend updating the Selection Controls demo with these suggestions as that's where I ran amok.
https://material-ui.com/demos/selection-controls/
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js

[cjauvin]

I'm currently in the process of simultaneously learning React, MUI and TS, and I just ran today into the exact issue discussed in this thread. As I can't really (yet) understand both the problem and its (temporary?) solution, I begin to wonder if tackling TS and MUI at the same time makes sense for a beginner, and maybe also, if _now_ is a good time to do it. I'd appreciate any comments, thanks!