[Tooltip] Type requires children as property

Open
#30,911 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start at the Tooltip component's TypeScript props and reproduce the issue with the React.createElement example in the report. Check the existing type coverage for children passed as the third argument, and consider the issue done when that form type-checks without requiring children in the props object.

Written by the indexing model from the issue text.

Description

scope: tooltip typescript
Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

with React.createElement as h, I write

h(Tooltip, { title:"HTTPS" }, h(Lock) )

and get an error from typescript that 'children' property is missing.
Then I can workaround it as

h(Tooltip, { title:"HTTPS", children: h(Lock) } )

Expected behavior 🤔

I should be allowed to use the first (preferred) form

Steps to reproduce 🕹
import { createElement as h } from "react"
import { Lock } from '@mui/icons-material'

//...

h(Tooltip, { title:"HTTPS" }, h(Lock) )
Context 🔦

No response

Your environment 🌎
`npx @mui/envinfo` 

  System:                                                   
    OS: Windows 10 10.0.19042                               
  Binaries:                                                 
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.2.0 - C:\Program Files\nodejs\npm.CMD            
  Browsers:                                                 
    Chrome: Not Found                                       
    Edge: Spartan (44.19041.423.0), Chromium (97.0.1072.76) 
  npmPackages:                                              
    @emotion/react: ^11.7.1 => 11.7.1                       
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.65
    @mui/icons-material: ^5.3.0 => 5.3.0
    @mui/lab: ^5.0.0-alpha.66 => 5.0.0-alpha.66
    @mui/material: ^5.3.0 => 5.3.0
    @mui/private-theming:  5.3.0
    @mui/styled-engine:  5.3.0
    @mui/styles: ^5.3.0 => 5.3.0
    @mui/system:  5.3.0
    @mui/types:  7.1.0
    @mui/utils:  5.3.0
    @mui/x-data-grid: ^5.3.0 => 5.3.0
    @types/react: ^17.0.38 => 17.0.38
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.5.5 => 4.5.5
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.