[bug]: FilterableMultiSelect shows blank row for custom load-more item when used with pagination support (v1.93.0)

[prashantv3216]

When using FilterableMultiSelect with a custom itemToElement for a "Load More" item for pagination support, the row renders as a blank row and filtering it on the top of the list.

This seems to happen because Carbon’s internal logic filters out items to top and may ignore itemToElement for these items, even if filterItems correctly returns them.

version: @carbon/react: 1.93.0

Steps to Reproduce

1. Use FilterableMultiSelect
2. Pass items including a "Load More" object, for example:

const loadMoreItem = {
id: 'load-more',
text: 'Load More…',
label: 'Load More…',
disabled:true,
onClick: () => console.log('Load more clicked')
};

const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
loadMoreItem
];

3. Use a custom itemToElement component:
   const CustomItem = ({ id, text, label, displayValue, onClick }) => {
   if (id === 'load-more') {
   return

   {text}
   ;
   }
   return {displayValue};
   };

4. Set filterItems so the load-more item is always included:
   filterItems={(items, { inputValue }) =>
   items.filter(item =>
   item.id === 'load-more' || itemToString(item).toLowerCase().includes(inputValue.toLowerCase())
   )
   }

Environment
React 18
@carbon/react v1.93.0
Browser: Chrome 115+

Expected Behavior

1. "Load More" item jumps to the top of the list and it appears as blank option.
2. This occurs even though filterItems returns the item and itemToElement is defined.

Expected Behavior

1. The custom "Load More" item should render reliably as a row using itemToElement.
2. It should remain at the bottom of the list, regardless of filtering.

[Gururajj77]

Hey @prashantv3216 , could you recreate this in a stackblitz for us to give a better look at this problem? Here is our sandbox repo link.

[prashantv3216]

Hi @Gururajj77, I recreated it, here is the link https://stackblitz.com/edit/github-wsmpmram?file=src%2FApp.jsx