context menu - openlayers interaction only on left mouse

Using openlayers (latest - 4), I have a drawing interaction that draws a circle -

let drawCircle = new ol.interaction.Draw({source: source, type: "Circle"});
map.addInteraction(drawCircle);

Both left mouse and right mouse click have the same behavior with this interaction- they start and stop the drawing of the circle.

I also have a context menu, so I do not want the right click to do anything with the interaction, just the left click.

How do I make this happen?

Answer

You can use condition option for ol.interaction.Draw.
when condition meets, drawing will be started.

In your case, drawing should be start with leftclick(which means button code 1)

So, simply add this code into ol.interaction.Draw's option.

condition: function(e) {
  // when the point's button is 1(leftclick), allows drawing
  if (e.pointerEvent.buttons === 1) { 
    return true;
  } else {
    return false;
  }
}

https://codepen.io/anon/pen/PRmJYb