Issue with select getting focus incorrectly.

rafa_bernad

I'm working on a rich text editor with toolbars, and so on. I'm trying it using fittable. The toolbar will have several iconbuttons, but also some select kinds. Everything works as expected at this stage, but I've found that when you put the control inside an InputDecorator, and click on any icon, the select kind receives the click too.

Using it outside the InputDecorator, everything works as expected, so it's an Enyo/Onyx bug? I can attach code, if you wish.

unwiredben

Yeah, a jsfiddle.net example would be ideal.

rafa_bernad

mhhh... I've found the issue:

enyo.kind({
	name: "onyx.InputDecorator",
	kind: "enyo.ToolDecorator",

// THIS:

	tag: "label",

//--


	classes: "onyx-input-decorator",
	//* @protected
	handlers: {
		onDisabledChange: "disabledChange",
		onfocus: "receiveFocus",
		onblur: "receiveBlur"
	},
	receiveFocus: function() {
		this.addClass("onyx-focused");
	},
	receiveBlur: function() {
		this.removeClass("onyx-focused");
	},
	disabledChange: function(inSender, inEvent) {
		this.addRemoveClass("onyx-disabled", inEvent.originator.disabled);
	}
});

I suppose there is a reason for that tag being "label", but causes issues with my code (and additional rendering weirdness in jsfiddle), that dissappear if I removed:

http://jsfiddle.net/j7Lhz/2/

omastudios

It's probably because tags are only really intended for inputs. I'm assuming you're using a contenteditable in which case the text field won't be viewed as a real input.

For the sake of clarity you could probably add tag: "div" (as this is what the tag property defaults to if rendered I think).

rafa_bernad

@omastudios Yeah, but that doesn't explain why tag a container as label...

(yeah, I'm using an iframe with contenteditable)

unwiredben

So, the reason the decorator is a label is so it will automatically redirect clicks on its client area to activate the internal input tag. It associates itself with the input tag by having it be its first child, but that's not the case with your code.

Since you don't want that behavior, rather than providing your own type, just change the tag value in the use case, I.e.

       {
        kind : "onyx.InputDecorator", tag: "div",
        style : "width: 400px; height: 200px;",
        components : [{
            kind : "VisualComposer", style: "height: 100%"
        }]
    }]

rafa_bernad

Ooops, forgot to say thank you!