fix: stabilize controlled autocomplete selections

src/components/XinyuanAutocomplete.jsx

 import {
   ChevronDown,
+  Check,
   Close,
   FIELD_SUFFIX_ICON_STYLE,
   Search,
@@ -27,6 +28,10 @@ function getSelectedKeySet(selectionMode, selectedKey, selectedKeys) {
   );
 }
 
+function toSelectionKey(value) {
+  return String(value ?? "");
+}
+
 export default function XinyuanAutocomplete({
   "aria-label": ariaLabel,
   className,
@@ -61,8 +66,13 @@ export default function XinyuanAutocomplete({
     selectedKey,
     selectedKeys,
   );
-  const selectedOptions = options.filter((option) =>
-    selectedKeySet.has(option.id),
+  const selectedKeyStringSet = new Set(
+    Array.from(selectedKeySet).map(toSelectionKey),
+  );
+  const selectedOptions = options.filter(
+    (option) =>
+      selectedKeySet.has(option.id) ||
+      selectedKeyStringSet.has(toSelectionKey(option.id)),
   );
   const resolvedValueText =
     valueText ??
@@ -71,7 +81,31 @@ export default function XinyuanAutocomplete({
       : placeholder);
   const rootSelectionProps =
     selectionMode === "multiple" ? { selectedKeys } : { selectedKey };
+  const listBoxSelectionProps =
+    selectionMode === "multiple" ? { selectionMode, selectedKeys } : {};
   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
@@ -122,7 +156,9 @@ export default function XinyuanAutocomplete({
           </SearchField>
           <ListBox
             aria-label={ariaLabel || placeholder}
+            dependencies={[Array.from(selectedKeyStringSet).join("\u0000")]}
             items={visibleOptions}
+            {...listBoxSelectionProps}
             renderEmptyState={() => (
               <div
                 className="grid min-h-20 place-items-center px-3 py-4"
@@ -132,22 +168,40 @@ 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>