Autocomplete data grouping does not work perfectly when data is updated

[RedFour]

What package has an issue

@mantine/core

Describe the bug

I posted a screenshot showing the issue. Item2 has group Item3. But when I add two new items also with group Item3, they are group by themselves.

The actually data has no difference between the groups. This issue only resolves itself when I refresh the app completely. All three items will be with the same group.

The issue only happens when I update the data behind Autocomplete.

What version of @mantine/hooks page do you have in package.json?

5.2.3

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[zhulien-ivanov]

Please, include a codesandbox representing the issue.

[RedFour]

https://codesandbox.io/s/silly-banach-8yotvi?file=/src/App.js

The initial state has Item1 grouped under A. After "Add Item to Group A" button is pressed, Autocomplete shows the new item under a different group A.

[rtivital]

@achmurali can you have a look at this?

[zhulien-ivanov]

I found where the issue is. I'll post a PR with a fix in a couple of hours.

[zhulien-ivanov]

#2297 is a partial solution that fixes the problem specifically in Autocomplete but buries the underlying issue even deeper in more repeating code. The problem is that SelectItems expects passed items to already be sorted in groups:

  let groupName = null;
  data.forEach((item, index) => {
    if (item.creatable) {
      creatableDataIndex = index;
    } else if (!item.group) {
      unGroupedItems.push(constructItemComponent(item, index));
    } else {
      if (groupName !== item.group) {
        groupName = item.group;
        groupedItems.push(
          <div className={classes.separator} key={`__mantine-divider-${index}`}>
            <Divider classNames={{ label: classes.separatorLabel }} label={item.group} />
          </div>
        );
      }
      groupedItems.push(constructItemComponent(item, index));
    }
  });

So currently, every component that uses SelectItems should do this ordering of items manually beforehand which is wasteful and prone to errors. Currently, those are Select, MultiSelect and Autocomplete. They all perform the same "hidden" setup logic before passing the items.

The grouping logic should be moved inside SelectItems and removed from all parent components. This way there won't be any more cases where 1 component works properly and the other doesn't, because of skipped setup, even though they have exactly the same underlying structure. Maintainability will improve greatly, especially because those are pretty complex components.

One issue about moving the grouping logic inside the SelectItems easily is that hover and selected states are based on item indexes. I propose ditching the indexes and using temporary IDs for items. SelectItems should be wrapped with a component that handles the grouping and exposes getNext, getPrevious and the other accessibility-related actions based on the ids. The added benefit is that a lot of the Select, MultiSelect and Autocomplete code can be shared and thus removed leaving a single point of contact between the underlying structure instead of repeating so much logic.

I already started investigating into it but I would like to discuss it first, as it is not a trivial issue and don't want it to turn into a fruitless effort.

@rtivital @achmurali