Skip to content

Commit c673f9f

Browse files
fix(#5745): Allow typing in Accordion (#5888)
* Allow typing in Accordion * Remove empty line --------- Co-authored-by: Reid Barber <reid@reidbarber.com>
1 parent 2b09060 commit c673f9f

File tree

3 files changed

+34
-2
lines changed

3 files changed

+34
-2
lines changed

packages/@react-aria/accordion/src/useAccordion.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T
7070
...props,
7171
...state,
7272
allowsTabNavigation: true,
73+
disallowTypeAhead: true,
7374
ref
7475
});
7576
return {

packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,24 @@ export const ControlledExpandedKeys: AccordionStory = {
6868
name: 'controlled ExpandedKeys'
6969
};
7070

71+
export const WithInput: AccordionStory = {
72+
args: {...Default.args, defaultExpandedKeys: ['step1']},
73+
render: (args) => (
74+
<Accordion {...args} >
75+
<Item key="step1" title="Shipping" hasChildItems={false}>
76+
<input type="text" />
77+
</Item>
78+
<Item key="step2" title="Billing" hasChildItems={false}>
79+
<input type="text" />
80+
</Item>
81+
<Item key="step3" title="Payment" hasChildItems={false}>
82+
<input type="text" />
83+
</Item>
84+
</Accordion>
85+
),
86+
name: 'With input'
87+
};
88+
7189

7290
function ControlledAccordion<T>(props: SpectrumAccordionProps<T>) {
7391
let [openKeys, setOpenKeys] = useState<Set<Key>>(new Set(['files']));

packages/@react-spectrum/accordion/test/Accordion.test.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ import userEvent from '@testing-library/user-event';
2020
let items = [
2121
{key: 'one', title: 'one title', children: 'one children'},
2222
{key: 'two', title: 'two title', children: 'two children'},
23-
{key: 'three', title: 'three title', children: 'three children'}
23+
{key: 'three', title: 'three title', children: <input type="text" />, hasChildItems: false}
2424
];
2525

2626
function renderComponent(props) {
2727
return render(
2828
<Provider theme={theme}>
2929
<Accordion {...props} defaultExpandedKeys={['one']} items={items}>
3030
{item => (
31-
<Item key={item.key} title={item.title}>
31+
<Item key={item.key} title={item.title} hasChildItems={item.hasChildItems}>
3232
{item.children}
3333
</Item>
3434
)}
@@ -131,4 +131,17 @@ describe('Accordion', function () {
131131
await user.tab({shift: true});
132132
expect(document.activeElement).toBe(thirdItem);
133133
});
134+
135+
it('allows users to type inside accordion items', async function () {
136+
let tree = renderComponent();
137+
let buttons = tree.getAllByRole('button');
138+
let itemWithInputHeader = buttons[2];
139+
act(() => itemWithInputHeader.click());
140+
141+
let [input] = tree.getAllByRole('textbox');
142+
act(() => input.focus());
143+
144+
await user.type(input, 'Type example');
145+
expect(input.value).toEqual('Type example');
146+
});
134147
});

0 commit comments

Comments
 (0)