javascript - React context menu onClick not working on multiple context menu

Question

I have the following code which triggers context menu, but when I do a search and get multiple results having same word, the onClick is not working, where as if I get one result with search word the onClick works fine. I tried giving unique id's to menu items as well, but still it's not working. Can you help me to figure out where is the issue?

const getHighlightText = (text, keyword, value) => {
    const startIndex = text.indexOf(keyword);
    const entryId = value.entryid;
    const entryParent = value.entryparent;
    const entryType = value.entrytype;

    return startIndex !== -1 ? (
        <span>
            {text.substring(0, startIndex)}
            <span style={{ color: '#03a0ce' }}>
                <ContextMenuTrigger id='HIGHLIGHTER_CONTEXT_MENU_1' holdToDisplay={1000}>
                    {text.substring(startIndex, startIndex + keyword.length)}
                </ContextMenuTrigger>
                <ContextMenu id='HIGHLIGHTER_CONTEXT_MENU_1' hideOnLeave={true}>
                    {(catalogType === 'M' || catalogType === 'L') ?
                      <MenuItem data={{event: 'CreateLibrary'}}
                                onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
                      >
                          Create Library
                      </MenuItem> : null}
                    
                </ContextMenu>
            </span>
            {text.substring(startIndex + keyword.length)}
        </span>
    ) : (
        <span>
            <ContextMenuTrigger id='HIGHLIGHTER_CONTEXT_MENU_2' holdToDisplay={1000}>
                {text}
            </ContextMenuTrigger>
            <ContextMenu id='HIGHLIGHTER_CONTEXT_MENU_2' hideOnLeave={true}>
                    {(catalogType === 'M' || catalogType === 'L') ?
                      <MenuItem data={{event: 'CreateLibrary'}}
                                onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
                      >
                          Create Library
                      </MenuItem> : null}
                </ContextMenu>
        </span>
    );
};

question from:https://stackoverflow.com/questions/66050992/react-context-menu-onclick-not-working-on-multiple-context-menu

Answer 1

I think the problem might be with context menu id, it should always be unique according to the documentation. Try adding a random string to the id.

const getHighlightText = (text, keyword, value) => {
const startIndex = text.indexOf(keyword);
const entryId = value.entryid;
const entryParent = value.entryparent;
const entryType = value.entrytype;

const randomString1 = `${entryId}-${btoa(Math.random().toString()).substring(0,16)}`
const randomString2 = `${entryParent}-${btoa(Math.random().toString()).substring(0,16)}`

return startIndex !== -1 ? (
    <span>
        {text.substring(0, startIndex)}
        <span style={{ color: '#03a0ce' }}>
            <ContextMenuTrigger id={randomString1} holdToDisplay={1000}>
                {text.substring(startIndex, startIndex + keyword.length)}
            </ContextMenuTrigger>
            <ContextMenu id={randomString1} hideOnLeave={true}>
                {(catalogType === 'M' || catalogType === 'L') ?
                  <MenuItem data={{event: 'CreateLibrary'}}
                            onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
                  >
                      Create Library
                  </MenuItem> : null}
                
            </ContextMenu>
        </span>
        {text.substring(startIndex + keyword.length)}
    </span>
) : (
    <span>
        <ContextMenuTrigger id={randomString2} holdToDisplay={1000}>
            {text}
        </ContextMenuTrigger>
        <ContextMenu id={randomString2} hideOnLeave={true}>
                {(catalogType === 'M' || catalogType === 'L') ?
                  <MenuItem data={{event: 'CreateLibrary'}}
                            onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
                  >
                      Create Library
                  </MenuItem> : null}
            </ContextMenu>
    </span>
  );
};