Skip to content

Commit 76eed1a

Browse files
author
Hector Arce De Las Heras
committed
Fixed focus issue with disabled toggle
Resolved an issue where the toggle component was still receiving focus even when it was disabled. The component now correctly ignores focus events when it is in a disabled state, improving usability and user experience
1 parent e2da5b5 commit 76eed1a

File tree

2 files changed

+4
-1
lines changed

2 files changed

+4
-1
lines changed

src/components/toggle/toggleStandAlone.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const ToggleStandAloneComponent = (
173173
hasThreePositions={props.hasThreePositions}
174174
id={props.id}
175175
styles={props.styles}
176-
tabIndex={0}
176+
tabIndex={!props.disabled ? 0 : undefined}
177177
togglePosition={props.togglePosition}
178178
onKeyDown={e => {
179179
e.persist();

src/components/toggleWithLabel/stories/toggleWithLabel.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const meta = {
1515
component: Story,
1616
parameters: {
1717
layout: 'centered',
18+
githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/toggle',
19+
figmaUrl:
20+
'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-29692&mode=dev',
1821
},
1922
tags: ['autodocs'],
2023
argTypes: argtypes(variantsObject, themeSelected),

0 commit comments

Comments
 (0)