"component" props does not exist on Drawer component

[JamieS1211]

Hi there, I hope this is in the right place. I am trying to use the component prop of "Drawer" to set it to use the "nav" html element. The drawer API states:

Any other props supplied will be provided to the root element (native element).

I have had this working before moving to typescript. In typescript I get the error "Property 'component' does not exist on type 'IntrinsicAttributes & DrawerProps'". Here in the docs I found the following

Not every component fully supports any component type you pass in. If you encounter a component that rejects its component props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.

I am assuming (and hoping) this is the case. Could you please confirm if this is the case and / or let me know if i'm being dumb (apologies).

Many thanks for reading, looking forward to a response

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mbrookes]

From the same section of the docs "Material-UI allows you to replace a component's root node via a component prop." could be taken to suggest that every component has a component prop. This isn't the case – some components, such as Drawer, don't.

@JamieS1211 Would you like to make that clearer in the docs?

[JamieS1211]

So in my testing I was looking at what plain javascript outputted and I was getting:

<div component={"nav"} ...>
    ...
</div>

I stupidly made the assumption that this had worked, guess my brain somehow decided it was in react props mode instead of HTML tag mode when checking if it had worked. I was also assuming that when component was not mentioned in the component props it was applying it to the HTML base element, glad I have been set straight.

Moving forwards I think it would be a good idea to add that to the docs to just note that as you pointed out not every component has a component prop. What is your thoughts on replacing "Material-UI allows you to replace a component's root node via a component prop." with "Many Material-UI components allow you to replace their root node via a component prop, this will be detailed in the components API documentation."?

In addition to this (I guess I should make a new issue / request ticket for this) what is your thoughts on allowing the component prop for the drawer so that people can specifically set the draw to use the "nav" html component for better accessibility usability? According to w3 schools "The <nav> tag defines a set of navigation links ... Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content"

[mbrookes]

@JamieS1211 The revised sentence looks good (wit an apostrophe in the second instance of "components").

Happy to be corrected here, but I believe that <nav> should be used as a child of drawer (although we're missing that in the docs navigation drawer).

[JamieS1211]

@mbrookes Thanks, added that with the apostrophe on the 2nd instance of component.

Makes sense to nest the "nav" component, guess there isn't a direct reason to add ability to override the "div" to a "nav" other than decreasing the number of DOM elements.