CodeMirror selection and radio button labels

1

I’m using version 5.30. I have a set of radio buttons to control drag drop. When I have text selected in CodeMirror I can’t click on the radio button labels to set the radio buttons. The labels are parent style and the buttons don’t have names so I have script to make sure only one is active. Is there any way to fix this?

	function handleRadios(group, dataValue) {
		var cm = this.cm;
		var radios = group.querySelectorAll("input");
		Array.prototype.slice.call(radios).forEach(function(radio, i) {
			radio.checked = (radio.getAttribute("data-value") == dataValue);
		});
	}
2

This doesn’t seem like it should have anything to do with CodeMirror (which might be reflected by the fact that the cm variable in the code snippet is entirely unused).

3

“var cm = this.cm;” is just something I’ve gotten into the habit of typing at the beginning of every function. I’ll take it out.

I’ve done some diagnostics: when no text is selected in the editor, my event listener picks up two click events, one from a span inside the label then another from the radio button; when text is selected, it picks up only the click from the span in the label. In an earlier version I had a sibling style label and I had the same problem.

Here’s the HTML

		'<span class="tb-drag-drop-span '+float+' '+display+'">'+
			'<span class="text-span tooltip">'+this.getPhraseOrIcon("drag_drop", true)+'</span>'+
			'<span class="tb-drag-drop">'+
				'<label class="label-span tooltip">'+
					'<input type="radio" class="tb-off radio OptionClick" data-value="off" data-action="updateDragDrop" checked="checked" />'+
					this.getPhraseOrIcon("off", true)+
				'</label>'+

				'<label class="label-span tooltip">'+
					'<input type="radio" class="tb-copy radio OptionClick" data-value="copy" data-action="updateDragDrop" />'+
					this.getPhraseOrIcon("copy", true)+
				'</label>'+

				'<label class="label-span tooltip">'+
					'<input type="radio" class="tb-move radio OptionClick" data-value="move" data-action="updateDragDrop" />'+
					this.getPhraseOrIcon("move", true)+
				'</label>'+	
				
			'</span>'+
		'</span>';

And the listener

	CodeMirror.on(this.container, "click", onClick = function(e) {   console.info(e.target);
		if(e.target.classList.contains("Click")) {				
			tools[e.target.getAttribute("data-action")].call(tools, e);
		}
		if(e.target.classList.contains("OptionClick")) {
			///e.target.focus()
			var value = e.target.getAttribute("data-value")
			tools[e.target.getAttribute("data-action")].call(tools, value)
		}
	});

And the method called

ToolBars.prototype.updateDragDrop = function(dataValue) {    //console.info("update")
	var cm = this.cm;
	cm.setOption("dragDrop", (dataValue != "off"));
	this.moveOnDrag = (dataValue == "move");
	handleRadios(this.elt.dragDrop, dataValue);
	return;
}