fix(bibliography): pick the right index after combobox filtering

front/src/components/SelectCombobox.js

@@ -4,14 +4,15 @@
 
 /**
  * @param {ComboboxItem[]} items
+ * @returns {Record<String, ComboboxItem[]>}
  */
 export function groupItems (items) {
-  return Array.from(items.reduce((groups, item, index) => {
+  return Array.from(items.reduce((groups, item) => {
     if (!groups.has(item.section)) {
       groups.set(item.section, [])
     }
 
-    groups.get(item.section).push({ ...item, index })
+    groups.get(item.section).push({ ...item })
 
     return groups
   }, new Map()).entries())

front/src/components/SelectCombobox.jsx

@@ -10,12 +10,12 @@ import clsx from 'clsx'
 import { groupItems } from './SelectCombobox.js'
 
 /**
- * @typedef ComboboxItem
+ * @typedef {Object} ComboboxItem
  *
  * @property {String} key
  * @property {String} name
- * @property {numbered} index
- * @property {String=} section
+ * @property {Number} index
+ * @property {String} [section]
  */
 
 export default function Combobox ({ id, label, items, value: initialSelectedItem, onChange }) {

front/src/components/SelectCombobox.test.js

@@ -4,27 +4,27 @@ import { groupItems } from "./SelectCombobox.js"
 describe('groupItems', () => {
   test('it should return a unique non-labeled group', () => {
     const items = [
-      { key: 1, name: 'one'},
-      { key: 2, name: 'two'}
+      { key: 1, name: 'one', index: 3},
+      { key: 2, name: 'two', index: 4}
     ]
 
     expect(groupItems(items)).toEqual([
-      [undefined, [{ key: 1, name: 'one', index: 0}, { key: 2, name: 'two', index: 1}]]
+      [undefined, [{ key: 1, name: 'one', index: 3}, { key: 2, name: 'two', index: 4}]]
     ])
   })
 
   test('it should 3 groups, 2 labeled, 1 non-labeled', () => {
     const items = [
-      { key: 1, name: 'one'},
-      { key: 'user-1', name: 'user one', section: 'user'},
-      { key: 'group-1', name: 'group one', section: 'group'},
-      { key: 'group-2', name: 'group two', section: 'group'},
+      { key: 1, name: 'one', index: 0 },
+      { key: 'user-1', name: 'user one', section: 'user', index: 2 },
+      { key: 'group-1', name: 'group one', section: 'group', index: 4},
+      { key: 'group-2', name: 'group two', section: 'group', index: 6},
     ]
 
     expect(groupItems(items)).toEqual([
       [undefined, [{ key: 1, name: 'one', index: 0 }]],
-      ['user', [{ key: 'user-1', name: 'user one', index: 1, section: 'user'}]],
-      ['group', [{ key: 'group-1', name: 'group one', index: 2, section: 'group'}, { key: 'group-2', name: 'group two', index: 3, section: 'group'}]],
+      ['user', [{ key: 'user-1', name: 'user one', index: 2, section: 'user'}]],
+      ['group', [{ key: 'group-1', name: 'group one', index: 4, section: 'group'}, { key: 'group-2', name: 'group two', index: 6, section: 'group'}]],
     ])
   })
 })

front/src/components/Write/bibliographe/ZoteroPanel.jsx

@@ -40,12 +40,15 @@ export default function ZoteroPanel ({ articleId, zoteroLink: initialZoteroLink,
   const handleZoteroLinkChange = useCallback((event) => setZoteroLink(event.target.value), [])
   const handleZoteroCollectionChange = useCallback((href) => setZoteroCollectionHref(href), [])
   const hasLinkChanged = useMemo(() => initialZoteroLink || initialZoteroLink !== zoteroLink, [zoteroLink])
+  /** @type {ComboboxItem[]} */
   const groupedZoteroCollections = useMemo(() => {
-    /** @type {ComboboxValue[]} */
-    return zoteroCollections.map(({ data, meta, library, links }) => ({
+    return zoteroCollections.map(({ data, meta, library, links }, index) => ({
       key: links.self.href,
       name: `${data.name} (${meta.numItems} items)`,
-      section: `${library.name} (${library.type})`
+      section: `${library.name} (${library.type})`,
+      // pre-assign an index to each entry. It will persist upon filtered results.
+      // @see https://github.com/EcrituresNumeriques/stylo/issues/1014
+      index
     }))
   }, [zoteroCollections])