Plotly_click on scatter3d is broken

plotly.js
1

When using plotly_click and ‘restyle’, ‘redraw’ etc. the plotly_click callback is repeatedly called indefinitely.

Update: See also: https://github.com/plotly/plotly.js/issues/1025 (which has a workaround also)

Here is a small example that shows this behaviour (on Chrome, Firefox and Safari):

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
	<div id="myDiv" style="width: 800px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  
  <script>
		var myPlot = document.getElementById('myDiv'),
		x = [1, 2, 3, 4, 5, 6],
		y = [1, 2, 3, 2, 3, 4],
		z = [1, 2, 3, 2, 3, 4],
		colors =['#00000','#00000','#00000',  '#00000','#00000','#00000'],
		data = [{x:x, y:y, z:z,       
		         type:'scatter3d',
		         mode:'markers', marker:{size:16, color:colors}}],
		layout = {
		    hovermode:'closest',
		    title:'Click on a Point<br>to Change Color'
		};
		
		Plotly.newPlot('myDiv', data, layout);
		
		myPlot.on('plotly_click', function(data){
			console.log("You clicked!")
			var pn='',
			    tn='',
			    colors=[];
			for(var i=0; i < data.points.length; i++){
			  pn = data.points[i].pointNumber;
			  tn = data.points[i].curveNumber;
			  colors = data.points[i].data.marker.color;
			};
			colors[pn] = '#C54C82';
			  
			var update = {'marker':{color: colors, size:16}};
			Plotly.restyle('myDiv', update, [tn]);
			});
			myPlot.on('plotly_restyle', function(data){
			console.log(data);
		});
  </script>
</body>