Commit da2b0019 authored by Andy-bubu's avatar Andy-bubu

fix: stabilize multi-select autocomplete values

parent 84dfb853
import {
ChevronDown,
Check,
Close,
FIELD_SUFFIX_ICON_STYLE,
Search,
......@@ -25,6 +26,10 @@ function getSelectedKeySet(selectionMode, selectedKey, selectedKeys) {
return new Set(selectedKey === null || selectedKey === undefined ? [] : [selectedKey]);
}
function toSelectionKey(value) {
return String(value ?? '');
}
export default function XinyuanAutocomplete({
'aria-label': ariaLabel,
className,
......@@ -59,8 +64,12 @@ export default function XinyuanAutocomplete({
selectedKey,
selectedKeys,
);
const selectedKeyStringSet = new Set(
Array.from(selectedKeySet).map(toSelectionKey),
);
const selectedOptions = options.filter((option) =>
selectedKeySet.has(option.id),
selectedKeySet.has(option.id) ||
selectedKeyStringSet.has(toSelectionKey(option.id)),
);
const resolvedValueText =
valueText ??
......@@ -69,9 +78,40 @@ export default function XinyuanAutocomplete({
: placeholder);
const rootSelectionProps =
selectionMode === 'multiple'
? { selectedKeys }
? { selectedKeys: selectedKeyStringSet }
: { selectedKey };
const listBoxSelectionProps =
selectionMode === 'multiple'
? {
selectionMode,
selectedKeys: selectedKeyStringSet,
}
: {};
const visibleOptions = isLoading || errorText ? [] : options;
const handleMultipleOptionPress = (option) => {
if (
selectionMode !== 'multiple' ||
!onSelectionChange ||
option?.isDisabled
) {
return;
}
const optionKey = toSelectionKey(option.id);
if (!optionKey) {
return;
}
const nextKeys = new Set(
Array.from(selectedKeyStringSet).filter(Boolean),
);
if (nextKeys.has(optionKey)) {
nextKeys.delete(optionKey);
} else {
nextKeys.add(optionKey);
}
onSelectionChange(nextKeys);
};
return (
<Autocomplete
......@@ -125,7 +165,11 @@ export default function XinyuanAutocomplete({
</SearchField>
<ListBox
aria-label={ariaLabel || placeholder}
dependencies={[
Array.from(selectedKeyStringSet).sort().join('\u0000'),
]}
items={visibleOptions}
{...listBoxSelectionProps}
renderEmptyState={() => (
<div
className="grid min-h-20 place-items-center px-3 py-4"
......@@ -135,22 +179,38 @@ export default function XinyuanAutocomplete({
</div>
)}
>
{(option) => (
<ListBox.Item
id={option.id}
isDisabled={option.isDisabled}
textValue={option.textValue || option.label}
>
{renderOption ? (
renderOption(option)
) : (
<Label className="truncate" title={option.label}>
{option.label}
</Label>
)}
<ListBox.ItemIndicator />
</ListBox.Item>
)}
{(option) => {
const isSelected = selectedKeyStringSet.has(toSelectionKey(option.id));
return (
<ListBox.Item
id={option.id}
isDisabled={option.isDisabled}
textValue={option.textValue || option.label}
{...(selectionMode === 'multiple'
? { onPress: () => handleMultipleOptionPress(option) }
: {})}
>
{renderOption ? (
renderOption(option)
) : (
<Label className="truncate" title={option.label}>
{option.label}
</Label>
)}
{selectionMode === 'multiple' ? (
<span
aria-hidden="true"
className="ml-auto inline-flex w-5 justify-center text-foreground"
>
{isSelected ? <Check size={14} /> : null}
</span>
) : (
<ListBox.ItemIndicator />
)}
</ListBox.Item>
);
}}
</ListBox>
</Autocomplete.Filter>
</Autocomplete.Popover>
......
......@@ -258,6 +258,10 @@ function UserSelector({ value, onChange, multiple, variant }) {
function FieldOptionSelect({ multiple, onChange, options, value, variant }) {
const values = multiple ? toArray(value).map(String) : [String(value || '')];
const selectedOptions = options.filter((option) => values.includes(String(option.value)));
const autocompleteOptions = options.map((option) => ({
id: String(option.value),
label: option.label,
}));
const displayValue = selectedOptions.length
? selectedOptions.map((option) => option.label).join('、')
: '请选择';
......@@ -265,7 +269,11 @@ function FieldOptionSelect({ multiple, onChange, options, value, variant }) {
? {
selectedKeys: new Set(values),
onSelectionChange: (keys) =>
onChange(keys === 'all' ? options.map((option) => option.value) : [...keys]),
onChange(
keys === 'all'
? autocompleteOptions.map((option) => option.id)
: [...keys],
),
}
: {
selectedKey: values[0] || null,
......@@ -276,10 +284,7 @@ function FieldOptionSelect({ multiple, onChange, options, value, variant }) {
<XinyuanAutocomplete
{...selectProps}
aria-label="选择字段值"
options={options.map((option) => ({
id: String(option.value),
label: option.label,
}))}
options={autocompleteOptions}
placeholder="请选择"
selectionMode={multiple ? 'multiple' : 'single'}
valueText={displayValue}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment