SpeedDialAction FabProps component generic parameter defaults to 'button' despite set 'href' attribute
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- 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 😯
When I add target and rel properties to the FabProps attribute of SpeedDialAction with href set I get a Typescript error, despite the component rendering correctly to a and not button
Expected Behavior 🤔
If I use those props with Fab itself I get no type errors which i think should be the case for FabProps as well
Steps to Reproduce 🕹
Steps:
Please refer to the codesandbox I created https://codesandbox.io/s/prod-monad-l3uji?file=/src/App.tsx (takes a while to parse the types, then the error pops up in editor)
I additionally tried to reproduce it id typescript playground but for some reason FabProps is any there
Context 🔦
I wanted to use SpeedDial to display some contact links. The component behaves exactly as expected but produces an error and I believe the cause is that FabProps always assumes component to be button when figuring out the props themselves.
Your Environment 🌎
`npx @material-ui/envinfo`
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 12.21.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.11 - /usr/bin/npm
Browsers:
Chrome: 89.0.4389.90
Firefox: 88.0.1
npmPackages:
@emotion/react: 11.1.5 => 11.1.5
@emotion/styled: 11.3.0 => 11.3.0
@material-ui/core: 5.0.0-alpha.31 => 5.0.0-alpha.31
@material-ui/lab: 5.0.0-alpha.31 => 5.0.0-alpha.31
@material-ui/styled-engine: 5.0.0-alpha.26
@material-ui/styles: 5.0.0-alpha.31
@material-ui/system: 5.0.0-alpha.30
@material-ui/types: 5.1.8
@material-ui/unstyled: 5.0.0-alpha.31
@material-ui/utils: 5.0.0-alpha.30
@types/react: 16.9.46 => 16.9.46
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
typescript: 4.1.2 => 4.1.2
`tsconfig.json`
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"strictNullChecks": true,
"module": "es6",
"moduleResolution": "node",
"noEmit": true,
"jsx": "react",
"target": "es2017",
"allowJs": true,
"lib": ["es2017", "dom"],
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"downlevelIteration": true,
"pretty": true,
"baseUrl": "./"
},
"include": ["cs/**/*"],
"exclude": [
"node_modules",
"cs/lib/tests/unit/*",
"cs/services/tests/unit/*"
]
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the TypeScript error in the linked CodeSandbox, then inspect the SpeedDialAction and FabProps entry points and compare them with Fab when href is set. Done means target and rel are accepted without a type error while the component continues to render as an anchor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100