Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type error when setting component on DialogContentText #19068

Closed
2 tasks done
Slessi opened this issue Jan 3, 2020 · 6 comments · Fixed by #19102
Closed
2 tasks done

Type error when setting component on DialogContentText #19068

Slessi opened this issue Jan 3, 2020 · 6 comments · Fixed by #19102
Labels
component: dialog This is the name of the generic UI component, not the React module!

Comments

@Slessi
Copy link
Contributor

Slessi commented Jan 3, 2020

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

This:

<DialogContentText component="div" />

Throws:

Property 'component' does not exist on type 'IntrinsicAttributes & DialogContentTextProps & { children?: ReactNode; }'. TS2769

Expected Behavior 🤔

Should accept component as a valid prop

Steps to Reproduce 🕹

https://codesandbox.io/s/charming-mccarthy-mx1kf

Steps:

  1. Load sandbox URL
  2. Wait a while... takes long for the error to appear

image

Context 🔦

I want the component to be a div so I can put <ul> inside which would be invalid inside a <p>

Your Environment 🌎

Tech Version
Material-UI 4.8.2
React 16.12.0
Browser Chrome
TypeScript 3.7.4
{
    "compilerOptions": {
        "baseUrl": "src",
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
        "downlevelIteration": true,
        "importHelpers": true
    },
    "include": ["src"]
}
@shorn
Copy link

shorn commented Jan 4, 2020

Problem seems to have been introduced with 4.8.1 and affects other components like Drawer, see https://stackoverflow.com/q/59494907/924597

@fyodore82
Copy link
Contributor

fyodore82 commented Jan 4, 2020

DialogContentText component is wrapper around Typography. As Typography type definition has been changed, DialogContentText also should be updated. I'll do it.

But I don't see any realtion to Drawer component. It is not depend on Typography and not use component prop. @shorn , could you please describe what is wrong with Drawer

@shorn
Copy link

shorn commented Jan 4, 2020

@fyodore82
Regarding Drawer - I'm not sure. It was actually someone else who commented on the SO linked question saying they had the same problem but with Drawer.

@JamieS1211
Copy link
Contributor

The draw issue was was caused because the "component" prop is not available on Drawer and unused props on Drawer are not forwarded onto a component that supports the "component" prop. Confusion was caused by some wording of the docs that was cleaned up here - #19015

@fyodore82
Copy link
Contributor

I've looked at Drawer component, It does not expect component prop. Drawer uses either div or Modal internally. Modal also does not support component prop

Do you means that we should add comoponent prop to Drawer?

@shorn
Copy link

shorn commented Jan 5, 2020

Sounds like Drawer never took component in the first place, but it was implied by the doco that it did.
If someone wants to refactor Drawer so that it does allow specification of a component - it seems like that should be a separate issue.

@zannager zannager added the component: dialog This is the name of the generic UI component, not the React module! label Dec 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: dialog This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants