We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Menu using template gets hidden after a selection

Hello,

When using MenuComponent with template, the item get hidden after a selection followed by a hover. Please refer to the screenshot to understand more. 

Thank you,

The code I'm using is the following: 


let menu: Menu
const [items, setItems] = useState(props.items)

const onSelect = (event) => {
props.itemSelected(event.item)
if (props.updateMain) {
menu.items = [{
...menu.items[0],
main: props.updateMain(event.item)
}]
menu.refresh()
setItems(menu.items)
}
}
return(
<MenuComponent {...props}
items={items}
ref={m => menu = m}
select={onSelect}
cssClass={'e-caret-hide e-scrollable-menu ' + props.cssClass}
enableScrolling={true}
/>)

Attachment: Reactmenu_fd20b0e2.zip

3 Replies

YA YuvanShankar Arunagiri Syncfusion Team October 27, 2022 06:48 AM

Hi Bouchra,


We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet and sample link. we can achieve your requirement by using the setItem method of the menu.

API link: https://ej2.syncfusion.com/react/documentation/api/menu/#setitem


[index.js]:

onSelect(args) {

        console.log(args.item.text);

        setTimeout(function() {

            const menuObj = getComponent(document.getElementById('menu'), 'menu');

            var item = {text: args.item.text};

            menuObj.setItem(item'changeItem'true);

        }, 10);

    }


Sample link: https://stackblitz.com/edit/react-iexau3?file=index.js

Could you please check the sample and get back to us, if you need any further assistance on this.


Regards, 

YuvanShankar A



BE Bouchra Essaghir October 28, 2022 09:11 AM

Hello,


Thank you for your response. Although this seems to work only if you're not using a template :/ using a simple template: 

const contextTemplate = data =>
(
data.text
? <Text color="white"
fontSize={2}
fontWeight="bold">
{data.text}
</Text>
: <div>{data.text}</div>
)

makes the menu not change the item at all: 



Attachment: StillNotWorking_a4e5e2b3.zip


YA YuvanShankar Arunagiri Syncfusion Team October 31, 2022 08:43 AM

Hi Bouchra,


We have validated your reported query and prepared the sample based on your requirement. Using the refresh method of the menu, we can resolve the reported issue.

API link: https://ej2.syncfusion.com/javascript/documentation/api/menu/#refresh


[index.js]:

setTimeout(function() {

            const menuObj = getComponent(document.getElementById('menu'), 'menu');

            var item = {text: args.item.text};

            menuObj.setItem(item'changeItem'true);

            menuObj.refresh();

        }, 10);

 


Sample link: https://stackblitz.com/edit/react-iexau3-rhehyj?file=index.js

Could you please check the sample and get back to us, if you need any further assistance on this.


Regards, 

YuvanShankar A


Loader.
Live Chat Icon For mobile
Up arrow icon