Telerik Forums / KendoReact

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

0 Answers 76 Views
Switch
Jimmy
Top achievements
Rank 1
Iron
Jimmy asked on 08 Mar 2022, 05:01 PM
No-Slider.png
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
Telerik team
commented on 09 Mar 2022, 11:35 AM

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
Top achievements
Rank 1
Iron
commented on 09 Mar 2022, 01:07 PM

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
Top achievements
Rank 1
Iron
commented on 09 Mar 2022, 01:08 PM

 

 

  <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
Telerik team
commented on 09 Mar 2022, 02:19 PM

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
Top achievements
Rank 1
Iron
commented on 09 Mar 2022, 02:34 PM

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
Telerik team
commented on 10 Mar 2022, 12:45 PM

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
Top achievements
Rank 1
Iron
commented on 10 Mar 2022, 12:55 PM

Here is my package.json file.
Filip
Telerik team
commented on 11 Mar 2022, 01:58 PM

Hi, Jimmy,

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

Regards,
Philip
Jimmy
Top achievements
Rank 1
Iron
commented on 11 Mar 2022, 02:37 PM

Package.txt
I did not realize the site stopped me from uploading that file type.  Here you go...
Filip
Telerik team
commented on 14 Mar 2022, 02:15 PM

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

No answers yet. Maybe you can help?

Tags
Switch
Asked by
Jimmy
Top achievements
Rank 1
Iron
Share this question
or