Mantine menu item not working as expected

Question

We are using Menu component to show navigation menu on top. It works fine, however, for menu item, the click area is restricted to only where we have text. If we click on the remaining area then the menu just closes itself. I tried inspecting and found that the hyper link is only applied to the text.

Any suggestions?

here is the component:

return (
        <>
            <Menu trigger="hover" className={'${classes.menuItem} ${classes.navmenu}'} position='bottom' offset='8' withArrow> 
                {hasDropdown && (
                    <Menu.Dropdown key={'Dd_' + level}>
                        {dropdownItems.map(({ title, href, dropdownItems, index, isOffice }) => (
                            <React.Fragment key={index}>
                                {Boolean(dropdownItems) && (
                                    <NavSubItem
                                        key={'NV+' + level + '_' + index}
                                        title={title}

                                    />
                                )}
                                {!Boolean(dropdownItems) && !Boolean(isOffice) && (
                                    <Menu.Item
                                        key={level + '_' + index}
onClick={()=>myFunction()}
                                        className={classes.menuItem} // Apply custom CSS class to MenuItem
                                    >
                                        {title}
                                    </Menu.Item>
                                )}
                            </React.Fragment>
                        ))}
                    </Menu.Dropdown>
                )}
            </Menu>
        </>
    );

here is how it is being called: (navDisplay is an array of items)

<div className="col-md-auto ml-md-auto order-1 order-md-3" style={{alignContent:'center'}}>
                        <Nav>
                            {navDisplay.map(({ title, dropdownItems, index }) => (
                                <NavItem
                                    key={title + index}
                                    title={title}
                                    hasDropdown={Boolean(dropdownItems)}
                                    dropdownItems={dropdownItems}
                                    setCounty={setCounty}
                                    county={county}
                                    level={0}
                                />
                            ))}
                        </Nav>
                    </div>

here is what is in the array:

For example, if we click on the space near green dot then it closes the menu. The hyperlink only works if we click on the blue line area.

see image below, about what we get when we inspect the element, as we can see, the button element doesn't have any click event and hyperlink element (a) is way under it.

Answer 1

The solution is to use css for the component:

button div {
 display: block;
 width:100%
}

button div a {
 display: block;
 width:100%
}