In electron, I have a tray menu in which each item has icon, indicating wheather the item is set or no. To select an item, you must click on it. I don’t want a radio button because I want the set status to be represented with an icon.

I have used the following code and it works:

let tray;
let items;

function setTrayMenu() {
  if(!tray){
    const icon = nativeImage.createFromPath(path.join(__dirname, 'assets', 'trayicon.png'));
    tray = new Tray(icon);
    tray.setToolTip('MyApp');
  }

  let template = [];

  if(items){
    const iconSet = nativeImage.createFromPath(path.join(__dirname, 'assets', 'item_set.png'));
    const iconUnset = nativeImage.createFromPath(path.join(__dirname, 'assets', 'item_unset.png'));
    
    items.forEach( (c, i) => {
      template.push({
        label: c.name,
        type: 'normal',
        click: clickTray,
        id: i,
        icon: c.set ? iconSet : iconUnset
      });
    })
  }

  const contextMenu = Menu.buildFromTemplate(template);
  tray.setContextMenu(contextMenu);
}

function clickTray(menuItem, window, event){
  menuClients.forEach( (c, i) => {
    if(i === menuItem.id){
      c.set = true;
    } else {
      c.set = false;
    }
  });
  setTrayMenu(menuClients);
}

app.whenReady().then(() => {
  items = [
    { name: 'Item 1', set: false },
    { name: 'Item 2, set: false },
    { name: 'Item 3', set: false }
  ]
  setTrayMenu();
});

I would like the menu not to close when I click on it, but just refresh. How can I achieve this?