Skip to content

Stepper having two and more steps causing warnings received false for a non-boolean attribute inside internal SVG #16480

Description

@serrnovik

Stepper having two and more steps causing Warnings : Received false for a non-boolean attribute active (and same for completed) inside internal SVG inside (probably) Step.js

Expected Behavior

Create simple stepper with two and more steps (having just one step causes no warnings), like:

<Stepper activeStep={this.state.stepIndex}  connector={<ArrowForwardIcon />}  >
                    <Step key="1">
                        <StepLabel > bla1</StepLabel>
                    </Step>
                    <Step key="2">
                        <StepLabel > bla1</StepLabel>
                    </Step>
                </Stepper>

Expect to see no issues in console log.

Current Behavior

react-dom.development.js:506 Warning: Received `false` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="false" or active={value.toString()}.

If you used to conditionally omit it with active={condition && value}, pass active={condition ? value : undefined} instead.
    in svg (created by ForwardRef(SvgIcon))
    in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
    in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by OperationProgress)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Stepper))
    in ForwardRef(Stepper) (created by WithStyles(ForwardRef(Stepper)))
    in WithStyles(ForwardRef(Stepper)) (created by OperationProgress)
    in div (created by OperationProgress)
    in OperationProgress (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(OperationProgress)) (created by OperationDashboardElement)
    in div (created by ForwardRef(DialogContent))
    in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
    in WithStyles(ForwardRef(DialogContent)) (created by OperationDashboardElement)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
    in div (created by Transition)
...

Warning: Received `true` for a non-boolean attribute `completed`.

If you want to write it to the DOM, pass a string instead: completed="true" or completed={value.toString()}.
    in svg (created by ForwardRef(SvgIcon))
    in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
    in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by OperationProgress)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Stepper))
    in ForwardRef(Stepper) (created by WithStyles(ForwardRef(Stepper)))
    in WithStyles(ForwardRef(Stepper)) (created by OperationProgress)
    in div (created by OperationProgress)
    in OperationProgress (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(OperationProgress)) (created by OperationDashboardElement)
    in div (created by ForwardRef(DialogContent))
    in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
    in WithStyles(ForwardRef(DialogContent)) (created by OperationDashboardElement)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
    in div (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by WithTheme(ForwardRef(Fade)))
    in WithTheme(ForwardRef(Fade)) (created by TrapFocus)
    in TrapFocus (created by Modal)
    in div (created by Modal)
    in ForwardRef(Portal) (created by Modal)
    in Modal (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by WithTheme(ForwardRef(Modal)))
    in WithTheme(ForwardRef(Modal)) (created by ForwardRef(Dialog))
    in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
    in WithStyles(ForwardRef(Dialog)) (created by OperationDashboardElement)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by OperationDashboardElement)
    in OperationDashboardElement (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(OperationDashboardElement)) (created by AppMaster)
    in div (created by AppMaster)
...

Environment 🌎

Tech Version
Material-UI v4.0.1
React v16.8.6
Browser Chrome
TypeScript v3.4.5

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsImprovements or additions to the documentation.good first issueGreat for first contributions. Enable to learn the contribution process.scope: stepperChanges related to the stepper.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions