Issue with select getting focus incorrectly.

edited April 2012 in Enyo 2
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.

Comments

  • Yeah, a jsfiddle.net example would be ideal.
  • edited April 2012
    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/
  • It's probably because
  • @omastudios Yeah, but that doesn't explain why tag a container as label...

    (yeah, I'm using an iframe with contenteditable)
  • 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%"
            }]
        }]
  • Ooops, forgot to say thank you!
Sign In or Register to comment.