Setting `mentionLookupOptions` in SendBox breaks default keyboard interactions

[musale]

Describe the bug; what happened? When you set the mentionLookupOptions in the SendBox, the JSX element provided for onRenderSuggestionItem renders correctly. However, keyboard up/down is not working, the current position of the highlighted suggestion is not shown and the scrolling bar is not showing.

What are the steps to reproduce the issue?

• Use the mention users feature in SendBox
• Set the mentionLookupOptions to:

  
  import { Mention, SendBox, FluentThemeProvider } from '@azure/communication-react';
  import React, { useEffect } from 'react';

const suggestions: Mention[] = [ { id: '1', displayText: '' }, { id: '2', displayText: 'Patricia Adams' }, { id: '3', displayText: '1' }, { id: '4', displayText: 'Your user' }, { id: '5', displayText: 'Milton Dyer' }, { id: '6', displayText: 'Ella Stewart' }, { id: '7', displayText: 'Todd Nelson' }, { id: '8', displayText: 'Bertie Holman' }, { id: '9', displayText: 'Chloe Alvarez' }, { id: '10', displayText: 'Hannah Gibson' }, { id: '11', displayText: "Amelia O'Connor" }, { id: '12', displayText: "Amelia O'Connor" }, { id: '13', displayText: 'Imogen Morris' }, { id: '14', displayText: 'Freya Hayes' }, { id: '15', displayText: 'Ellie Collins' }, { id: 'everyone', displayText: 'Everyone' } ]; const trigger = '@';

export const MentionsExample: () => JSX.Element = () => { const timeoutRef = React.useRef(); const delayForSendButton = 300;

useEffect(() => { return () => { timeoutRef.current && clearTimeout(timeoutRef.current); }; }, []);

return (

{ timeoutRef.current = setTimeout(() => { alert(`sent message: ${message} `); }, delayForSendButton); }} onTyping={async () => { return; }} mentionLookupOptions={{ trigger, onQueryUpdated: async (query: string) => { const filtered = suggestions.filter((suggestion) => { return suggestion.displayText.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()); }); return Promise.resolve(filtered); }, // This is the override onRenderSuggestionItem: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void): JSX.Element => { return

{suggestion.displayText}

}} />

); };

- Trigger the mentions suggestions using the `@` trigger.
- Notice there is no indicator of the current position of the suggestions.
- Using the up/down arrow, notice the scrollbar is not moving.
- Pressing `Enter` key, notice the _selected_ (you've to assume position) suggestion is selected.

**What behavior did you expect?**

Setting the `onRenderSuggestionItem` should still hold the default keyboard behavior for navigation, scrolling and selection on the custom suggestions rendered.

**If applicable, provide screenshots:**

Custom rendered suggestions:
![image](https://github.com/Azure/communication-ui-library/assets/8081536/62fcd661-16ad-4da2-91ec-ec4a1a83a5e9)

No scroll bar or action when up/down on custom suggestions
![image](https://github.com/Azure/communication-ui-library/assets/8081536/8c31642b-bcca-4c93-a69d-605336c33079)

**In what environment did you see the issue?**

- `@azure/communication-react` npm package version (if applicable): [e.g. 1.10.0-beta.1]
- `@azure/communication-calling` npm package version (if applicable): [e.g. 1.16.3]
- `@azure/communication-chat` npm package version (if applicable): [e.g. 1.3.2]

- OS & Device: Windows
- Browser: Microsoft Edge
- Browser Version: 119.0.2151.72 (Official build)

**Is there any additional information?**

- Could the customization of the suggestions box/list  also be added? This would reduce dependance on the default experience and allow developers to render suggestions with controls and functionality that they want.

[palatter]

Thanks for reaching out to us. Please allow us to look into this and we would get back to you shortly.

[palatter]

For respect to the selection not showing, this is by design. When you override the onRender method, you are given the current selected item and can then render selection yourself. This gives you the option to fully custimize it.

As for scrolling, as mentioned in the other issue you created, we have created a bug for this and will update you on it's status there.

[gavinbarron]

@palatter for us to correctly render the mentions with an indicator showing the active element in the list the active parameter needs to be correctly exposed in the typings.

Here we see that there is an active parameter being passed to the onRender method that we are providing https://github.com/Azure/communication-ui-library/blob/db5cfd0a8484c875b57316e0afcebb6b4358aa5e/packages/react-components/src/components/MentionPopover.tsx#L331

But here https://github.com/Azure/communication-ui-library/blob/db5cfd0a8484c875b57316e0afcebb6b4358aa5e/packages/react-components/src/components/MentionPopover.tsx#L88 the active parameter is not exposed and therefore consumers of the library using TypeScript are unaware of the existence of this vital parameter.

[emlynmac]

@palatter can we get this added to the API? It would be nice to wrap this into the next beta

[emlynmac]

@musale This was released in the last beta, I'm going to close this issue now that the fix is release.