Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-19 17:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

autocomplete: treat query as item (#430)

Browse Source
This commit is contained in:
无限UCW authored and GitHub committed 2022-09-23 01:32:34 +08:00
1 parent 4d61549f06
commit eedbf7875f
1 file changed
+7 -7
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-default/components/autocomplete/components/AutoComplete.tsx
+7 -7
View File
@@ -130,7 +130,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
const dispatchChange = () => { const dispatchChange = () => {
if (!multi) onChange(inputRef.current?.value); if (!multi) onChange(inputRef.current?.value);
else onChange(selectedKeys.join(',')); else onChange([...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length > 0).join(','));
}; };
let first = !multi; let first = !multi;
@@ -148,7 +148,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
const handleInputChange = debounce((e?) => queryList(e ? e.target.value : ''), 300); const handleInputChange = debounce((e?) => queryList(e ? e.target.value : ''), 300);
const toggleItem = (item: T, key = itemKey(item)) => { const toggleItem = (item: T, key = itemKey(item), preserve = false) => {
const shouldKeepOpen = allowEmptyQuery && inputRef.current.value === '' && !multi; const shouldKeepOpen = allowEmptyQuery && inputRef.current.value === '' && !multi;
if (multi) { if (multi) {
const idx = selectedKeys.indexOf(key); const idx = selectedKeys.indexOf(key);
@@ -167,14 +167,14 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
setSelected((s) => [...s, item]); setSelected((s) => [...s, item]);
setSelectedKeys((s) => [...s, key]); setSelectedKeys((s) => [...s, key]);
} }
inputRef.current.value = ''; if (!preserve) inputRef.current.value = '';
inputRef.current.focus(); inputRef.current.focus();
} else { } else {
setSelected([item]); setSelected([item]);
setSelectedKeys([key]); setSelectedKeys([key]);
inputRef.current.value = key; inputRef.current.value = key;
dispatchChange();
} }
dispatchChange();
if (!shouldKeepOpen) { if (!shouldKeepOpen) {
setItemList([]); setItemList([]);
setCurrentItem(null); setCurrentItem(null);
@@ -231,8 +231,8 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getSelectedItems: () => selected, getSelectedItems: () => selected,
getSelectedItemKeys: () => selectedKeys, getSelectedItemKeys: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length > 0),
getSelectedItemsAsString: () => selectedKeys.join(','), getSelectedItemsAsString: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length > 0).join(','),
setSelectedItems: (items) => { setSelectedItems: (items) => {
setSelected(items); setSelected(items);
setSelectedKeys(items.map((i) => itemKey(i))); setSelectedKeys(items.map((i) => itemKey(i)));
@@ -285,7 +285,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
return ( return (
<DraggableSelection type={draggableId} id={key} move={move} className="autocomplete-tag" key={item ? key : `draft-${key}`}> <DraggableSelection type={draggableId} id={key} move={move} className="autocomplete-tag" key={item ? key : `draft-${key}`}>
<div>{item ? itemText(item) : key}</div> <div>{item ? itemText(item) : key}</div>
<Icon name="close" onClick={() => toggleItem(item, key)} /> <Icon name="close" onClick={() => toggleItem(item, key, true)} />
</DraggableSelection> </DraggableSelection>
); );
})} })}