Typescript 3.2 bug: FormControl component="fieldset" not valid

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]

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.

[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!