Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5774230

Browse files
LFDanLuLFDanLu
authored
Removing isOpen and defaultOpen from ComboBox (adobe#1928)
* removing isOpen and defaultOpen from ComboBox * fixing aria and stately tests
1 parent 725559b commit 5774230

7 files changed

Lines changed: 45 additions & 690 deletions

File tree

‎packages/@react-aria/combobox/test/useComboBox.test.js‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
import {act, renderHook} from '@testing-library/react-hooks';
1314
import {Item} from '@react-stately/collections';
1415
import {ListLayout} from '@react-stately/layout';
1516
import React from 'react';
16-
import {renderHook} from '@testing-library/react-hooks';
1717
import {useComboBox} from '../';
1818
import {useComboBoxState} from '@react-stately/combobox';
1919
import {useSingleSelectListState} from '@react-stately/list';
@@ -78,21 +78,36 @@ describe('useComboBox', function () {
7878
buttonRef: React.createRef(),
7979
inputRef: {
8080
current: {
81-
contains: jest.fn()
81+
contains: jest.fn(),
82+
focus: jest.fn()
8283
}
8384
},
8485
listBoxRef: React.createRef(),
85-
layout: mockLayout,
86-
isOpen: true
86+
layout: mockLayout
8787
};
8888

89-
let {result, rerender} = renderHook((props) => useComboBox(props, useComboBoxState(props)), {initialProps: props});
89+
let {result: state} = renderHook((props) => useComboBoxState(props), {initialProps: {...props, allowsEmptyCollection: true}});
90+
act(() => {
91+
// set combobox state to open
92+
state.current.open();
93+
});
94+
95+
let {result, rerender} = renderHook((props) => useComboBox(props, state.current), {initialProps: props});
9096
let {inputProps} = result.current;
9197

92-
inputProps.onKeyDown(event({key: 'Enter'}));
98+
act(() => {
99+
inputProps.onKeyDown(event({key: 'Enter'}));
100+
});
101+
93102
expect(preventDefault).toHaveBeenCalledTimes(1);
94103

95-
rerender({...props, isOpen: false});
104+
act(() => {
105+
// set combobox state to close
106+
state.current.close();
107+
});
108+
109+
// Rerender so updated state value is propagated to useComboBox
110+
rerender(props);
96111
result.current.inputProps.onKeyDown(event({key: 'Enter'}));
97112
expect(preventDefault).toHaveBeenCalledTimes(1);
98113
});
@@ -111,8 +126,7 @@ describe('useComboBox', function () {
111126
}
112127
},
113128
listBoxRef: React.createRef(),
114-
layout: mockLayout,
115-
isOpen: false
129+
layout: mockLayout
116130
};
117131

118132
let {result: state} = renderHook((props) => useComboBoxState(props), {initialProps: props});

‎packages/@react-spectrum/combobox/src/ComboBox.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,8 @@ interface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {
191191
triggerProps: AriaButtonProps,
192192
triggerRef: RefObject<FocusableRefValue<HTMLElement>>,
193193
style?: React.CSSProperties,
194-
className?: string
194+
className?: string,
195+
isOpen?: boolean
195196
}
196197

197198
const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: RefObject<HTMLElement>) {

‎packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx‎

Lines changed: 1 addition & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ storiesOf('ComboBox', module)
8282
.add(
8383
'with mapped items (defaultItem and items undef)',
8484
() => (
85-
<ComboBoxWithMap defaultOpen defaultSelectedKey="two" />
85+
<ComboBoxWithMap defaultSelectedKey="two" />
8686
)
8787
)
8888
.add(
@@ -190,29 +190,6 @@ storiesOf('ComboBox', module)
190190
</Flex>
191191
)
192192
)
193-
.add(
194-
'isOpen',
195-
() => <ControlledOpenCombobox isOpen allowsCustomValue defaultSelectedKey="two" />,
196-
{note: 'Combobox needs focus to show dropdown.'}
197-
)
198-
.add(
199-
'defaultOpen',
200-
() => (
201-
<Flex direction="column">
202-
<TextField label="Email" />
203-
<ComboBox label="Combobox" defaultOpen {...actions}>
204-
<Item key="one">Item One</Item>
205-
<Item key="two" textValue="Item Two">
206-
<Copy size="S" />
207-
<Text>Item Two</Text>
208-
</Item>
209-
<Item key="three">Item Three</Item>
210-
</ComboBox>
211-
<TextField label="Name" />
212-
</Flex>
213-
),
214-
{note: 'Combobox needs focus to show dropdown.'}
215-
)
216193
.add(
217194
'disabled keys',
218195
() => (
@@ -426,30 +403,6 @@ storiesOf('ComboBox', module)
426403
<ControlledKeyComboBox defaultInputValue="Blah" selectedKey="2" disabledKeys={['2', '6']} />
427404
)
428405
)
429-
.add(
430-
'inputValue and isOpen (controlled)',
431-
() => (
432-
<ControlledValueOpenCombobox />
433-
)
434-
)
435-
.add(
436-
'selectedKey and isOpen (controlled)',
437-
() => (
438-
<ControlledKeyOpenCombobox />
439-
)
440-
)
441-
.add(
442-
'inputValue, selectedKey, and isOpen (controlled)',
443-
() => (
444-
<AllControlledOpenComboBox selectedKey="2" inputValue="Kangaroo" disabledKeys={['2', '6']} />
445-
)
446-
)
447-
.add(
448-
'inputValue, selectedKey, isOpen, allowsCustomValue (controlled)',
449-
() => (
450-
<AllControlledOpenComboBox selectedKey="2" inputValue="Kangaroo" disabledKeys={['2', '6']} allowsCustomValue />
451-
)
452-
)
453406
.add(
454407
'custom filter',
455408
() => (
@@ -899,139 +852,6 @@ let CustomValueComboBox = (props) => {
899852
);
900853
};
901854

902-
let ControlledOpenCombobox = (props) => {
903-
let [isOpen, setOpen] = React.useState(props.isOpen);
904-
905-
return (
906-
<Flex direction="column">
907-
<TextField label="Email" />
908-
<ComboBox label="Combobox" {...mergeProps(props, actions)} isOpen={isOpen} onOpenChange={setOpen}>
909-
<Item key="one">Item One</Item>
910-
<Item key="two" textValue="Item Two">
911-
<Copy size="S" />
912-
<Text>Item Two</Text>
913-
</Item>
914-
<Item key="three">Item Three</Item>
915-
</ComboBox>
916-
<TextField label="Name" />
917-
</Flex>
918-
);
919-
};
920-
921-
let ControlledValueOpenCombobox = (props) => {
922-
let [fieldState, setFieldState] = React.useState({
923-
isOpen: false,
924-
inputValue: ''
925-
});
926-
927-
let onInputChange = (value: string) => {
928-
setFieldState({
929-
isOpen: true,
930-
inputValue: value
931-
});
932-
};
933-
934-
let onOpenChange = (isOpen: boolean) => {
935-
setFieldState(prevState => ({
936-
isOpen: isOpen,
937-
inputValue: prevState.inputValue
938-
}));
939-
};
940-
941-
let onSelectionChange = (key) => {
942-
setFieldState({
943-
isOpen: false,
944-
inputValue: items.find(item => item.id === key)?.name ?? ''
945-
});
946-
};
947-
948-
return (
949-
<ComboBox label="Combobox" {...mergeProps(props, actions)} defaultItems={items} isOpen={fieldState.isOpen} onOpenChange={onOpenChange} inputValue={fieldState.inputValue} onInputChange={onInputChange} onSelectionChange={onSelectionChange}>
950-
{(item: any) => <Item>{item.name}</Item>}
951-
</ComboBox>
952-
);
953-
};
954-
955-
let ControlledKeyOpenCombobox = (props) => {
956-
let [fieldState, setFieldState] = React.useState({
957-
isOpen: false,
958-
selectedKey: 'two'
959-
});
960-
961-
let onSelectionChange = (key: string) => {
962-
setFieldState({
963-
isOpen: false,
964-
selectedKey: key
965-
});
966-
};
967-
968-
let onOpenChange = (isOpen: boolean) => {
969-
setFieldState(prevState => ({
970-
isOpen: isOpen,
971-
selectedKey: prevState.selectedKey
972-
}));
973-
};
974-
975-
return (
976-
<ComboBox label="Combobox" {...mergeProps(props, actions)} isOpen={fieldState.isOpen} onOpenChange={onOpenChange} selectedKey={fieldState.selectedKey} onSelectionChange={onSelectionChange}>
977-
<Item key="one">Item One</Item>
978-
<Item key="two" textValue="Item Two">
979-
<Copy size="S" />
980-
<Text>Item Two</Text>
981-
</Item>
982-
<Item key="three">Item Three</Item>
983-
</ComboBox>
984-
);
985-
};
986-
987-
function AllControlledOpenComboBox(props) {
988-
let [fieldState, setFieldState] = React.useState({
989-
isOpen: false,
990-
selectedKey: props.selectedKey,
991-
inputValue: props.inputValue
992-
});
993-
994-
let list = useTreeData({
995-
initialItems: withSection
996-
});
997-
998-
let onSelectionChange = (key: React.Key) => {
999-
setFieldState(prevState => ({
1000-
isOpen: false,
1001-
inputValue: list.getItem(key)?.value.name ?? (props.allowsCustomValue ? prevState.inputValue : ''),
1002-
selectedKey: key
1003-
}));
1004-
};
1005-
1006-
let onInputChange = (value: string) => {
1007-
setFieldState(prevState => ({
1008-
isOpen: true,
1009-
inputValue: value,
1010-
selectedKey: value === '' ? null : prevState.selectedKey
1011-
}));
1012-
};
1013-
1014-
let onOpenChange = (isOpen: boolean) => {
1015-
setFieldState(prevState => ({
1016-
isOpen,
1017-
inputValue: prevState.inputValue,
1018-
selectedKey: prevState.selectedKey
1019-
}));
1020-
};
1021-
1022-
return (
1023-
<div>
1024-
<ComboBox allowsCustomValue={props.allowsCustomValue} disabledKeys={props.disabledKeys} selectedKey={fieldState.selectedKey} inputValue={fieldState.inputValue} defaultItems={list.items} label="Combobox" isOpen={fieldState.isOpen} onOpenChange={onOpenChange} onInputChange={onInputChange} onSelectionChange={onSelectionChange} onBlur={action('onBlur')} onFocus={action('onFocus')}>
1025-
{item => (
1026-
<Section items={item.children} title={item.value.name}>
1027-
{item => <Item>{item.value.name}</Item>}
1028-
</Section>
1029-
)}
1030-
</ComboBox>
1031-
</div>
1032-
);
1033-
}
1034-
1035855
function ResizeCombobox() {
1036856
let [size, setSize] = useState(true);
1037857

0 commit comments

Comments
 (0)