When I turn the Switch to the off state (with focus) the slider disappears

[Jimmy]

I am trying to figure out why the Switch control in my React project goes blank when you turn it to the off position.  It has something to do with it having focus because when I click somewhere else in the application the slider re-appears.

[Filip]

Hi, Jimmy,

I tried to reproduce the mentioned behavior in our demos, but it seems that the slider does not disappear:

https://stackblitz.com/edit/react-mcsep4?file=app/main.jsx

Can you provide more information on whether you are using the onFocus event to trigger some changes or not? Is it possible for you to provide a working example that reproduces this behavior so that I can inspect further? 

Regards,

Filip

[Jimmy]

I think it may have to do with the containers we are using:

 

Here is the Component Code:

<Card className='dash-card' style={{ height: '300px' }}>

                <CardHeader className='dash-card-header' style={{ height: '65px' }}>

                    <Col sm={{ size: 6 }} className='align-self-center' style={{ marginLeft: '-20px', marginTop: '7px' }}>Claim Assignments</Col>

                </CardHeader>

                <CardBody className='dash-card-body card-body-grid' style={{ marginTop: '30px', marginLeft: '30px' }}>

                    <Col sm={{ size: 6 }} >

                        <Row>

                            <Col>

                                <Label style={{ width: '165px' }}>Can Lock CDU Upload</Label>

                            </Col>

                            <Col>

                                <Switch

                                    name='isCDULock'

                                    checked={this.props.userProfile.profileClaims.some(p => p.name == "CDU_LOCK")}

                                    onChange={(e) => {

                                        if (e.value) {

                                            this.props.addClaim(this.props.userProfile.identity, "CDU_LOCK")

                                        }

                                        else {

                                            this.props.removeClaim(this.props.userProfile.identity, "CDU_LOCK")

                                        }

                                    }}

                                />

                            </Col>

                        </Row>

                        <Row style={{ marginTop: '10px' }}>

                            <Col>

                                <Label style={{ width: '165px' }}>Can Unlock CDU Upload</Label>

                            </Col>

                            <Col>

                                <Switch

                                    name='isCDUUnLock'

                                    checked={this.props.userProfile.profileClaims.some(p => p.name == "CDU_UNLOCK")}

                                    onChange={(e) => {

                                        if (e.value) {

                                            this.props.addClaim(this.props.userProfile.identity, "CDU_UNLOCK")

                                        }

                                        else {

                                            this.props.removeClaim(this.props.userProfile.identity, "CDU_UNLOCK")

                                        }

                                    }}

                                />

                            </Col>

                        </Row>

                    </Col>

                </CardBody>

            </Card>

[Jimmy]

 

 

  <Row>

                    <Col sm={{size:4}}>

                        <h5>{this.props.userProfile.fullName}</h5>

                    </Col>

                    {this.props.myProfile.role !== 'Admin' && !this.props.myProfile.isAdmin &&

                        <Col sm={{size:4}} className='center-align'>

                            <h5>{this.props.userProfile.roleDescription}</h5>

                        </Col>

                    }

                    {(this.props.myProfile.role === 'Admin' || this.props.myProfile.isAdmin) &&

                        <Col sm={{size:4}} className='center-align'>

                            <select name='role' className='h5 center-align' style={{textAlignLast:'center',height:'30px', border:'none', outline:'none' }}

                                value={this.props.userProfile.role} onChange={(e)=>this.props.assignRole(this.props.userProfile.identity,e.currentTarget.value, false)}>

                                {this.state.roles.map(i =>

                                    <option key={i.value} className='h5' value={i.value}>{i.name}</option>

                                )}

                            </select>

                        </Col>

                    }

                    <Col sm={{size:4}} className='float-right'>

                        <h5 className='float-right'>{this.props.userProfile.identity}</h5>

                    </Col>

                </Row>  

                <hr/>

                <br/>  

                <Row>

                    <Col sm={{size:6}}>

                        <CenterAssignments profile={this.props.userProfile} role={this.props.userProfile.role} isMyProfile={false}/>

                    </Col>

                    <Col sm={{ size: 6 }}>

                        <ClaimLockUnlockCashUpload />

                    </Col>  

                </Row>

[Filip]

Hi, Jimmy,

Two things can be done to possibly resolve this:

1) You can move the Switch component outside of these containers in order to see if they are the reason or not.

2) You can inspect the element and see if there is a style that comes from our theme causing this.

In case neither of these two approaches works for you, we will need a runnable example that showcases this behavior.

Regards,
Philip

[Jimmy]

When I inspect the control I get a class on the span equal to "k-widget k-switch k-switch-off k-state-focused" and when I put that in your sample it re-creates the issue.

[Filip]

Hello, Jimmy,

Can you please provide your package.json file so that we can inspect it further? It is possible that there is an issue with the version of the components and the themes, but we will need the package.json in order to investigate.

Regards,
Philip

[Jimmy]

Here is my package.json file.

[Filip]

Hi, Jimmy,

I don't see any attachment to your response, or any pasted content, can you share it again?

Regards,
Philip

[Jimmy]

I did not realize the site stopped me from uploading that file type.  Here you go...

[Filip]

Thank you for the package.json. I updated the example with it in order to see if the reason for this behavior is because of version difference, but it seems it is not:

https://stackblitz.com/edit/react-mdxl2x?file=app/main.tsx

Is it possible that there is a custom CSS that you are using that could be causing this? Please inspect the Switch and see if there are differences in the CSS applied to the component in the example and in the real application.

Regards,
Philip