Skip to content

Commit

Permalink
fix: Fixing focus blur problem on basic radio group example (#2198)
Browse files Browse the repository at this point in the history
Fixes: #2052  

Helps solve a focus blur problem described in issue #2052  after using the arrow keys to select a different option.

[category:Component]

Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com>
  • Loading branch information
williamjstanton and mannycarrera4 committed May 24, 2023
1 parent d16d097 commit d098fe6
Showing 1 changed file with 3 additions and 8 deletions.
11 changes: 3 additions & 8 deletions modules/react/radio/stories/examples/Basic.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react';
import styled from '@emotion/styled';
import {FormField} from '@workday/canvas-kit-react/form-field';
import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
import {space} from '@workday/canvas-kit-react/tokens';
import {useUniqueId} from '@workday/canvas-kit-react/common';
import {space} from '@workday/canvas-kit-react/tokens';

export const Basic = () => {
const [value, setValue] = React.useState<string | number>('deep-dish');
Expand All @@ -12,19 +11,15 @@ export const Basic = () => {
setValue(value);
};

const StyledFormField = styled(FormField)({
width: space.xl,
});

return (
<StyledFormField label="Choose Your Pizza Crust" useFieldset={true}>
<FormField label="Choose Your Pizza Crust" useFieldset={true} style={{width: space.xl}}>
<RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
<Radio label="Deep dish" value="deep-dish" />
<Radio label="Thin" value="thin" />
<Radio label="Gluten free" value="gluten-free" />
<Radio label="Cauliflower" value="cauliflower" />
<Radio label="Butter - the best thing to put on bread" value="butter" />
</RadioGroup>
</StyledFormField>
</FormField>
);
};

0 comments on commit d098fe6

Please sign in to comment.