Menu using template gets hidden after a selection

[Bouchra Essaghir]

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

[YuvanShankar Arunagiri]

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

[Bouchra Essaghir]

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

[YuvanShankar Arunagiri]

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