onyx.Picker inside kind: "List" - is not displaying selection

edited February 2014 in Enyo 2
i have simple onyx.Picker
			{kind: "onyx.PickerDecorator", components: [
				{},
				{kind: "onyx.Picker", components: [
					{content: "Gmail", active: true},
					{content: "Yahoo"},
					{content: "Outlook"},
					{content: "Hotmail"}
				]}
			]}

that I placed inside kCartItem component. And I added kCartItem within "List" -- code is below.
		{kind: "List", classes: "list-sample-contacts-list enyo-unselectable", fit: true, multiSelect: true, onSetupItem: "setupItem", components: [
			{name: "divider", classes: "list-sample-contacts-divider"},
			{name: "item", kind: "kCartItem", classes: "line-item enyo-border-box", onRemove: "removeTap"}
		]}
However the picker is not behaved as expected. Once, i tapped the picker, the selection is not displayed (item is highlighted though). Is it something related to "List" , that I need to use another type of "repeater"?

Thanks.

Comments

  • With an enyo.List, we are utilizing the same control (the onyx.Picker in this case) object for each row, so we have one onyx.Picker object that is being placed into the dom multiple times and thus is not fully hooked up for each row. If you aren't generating a large number of items, you might consider using an enyo.Repeater (this will generate separate objects for each row). If that doesn't seem like an option, check out this fiddle that Mark wrote for a similar issue with onyx.Checkbox inside enyo.List: http://jsfiddle.net/mbessey/P3yD2/
  • thanks a lot for your insight aarontam
  • I changed to Repeater. It resolved mentioned issue above but again the same onyx.Picker gave me anohter problem. The issue is the kind: "List" is located inside a container which is implemented as kind: "onyx.Popup"
    And the popup window is not dismissable (I can't close the popup) as soon as I added onyx.Picker. Any thought? Thanks..
  • edited February 2014
    The onyx.Popup is the container for the menu items in the picker. I'm not sure where the List kind is coming from - can you post a sample of what your code looks like, specifically the definition of your kCartItem custom kind that you are placing the picker in?
  • edited February 2014
    >> forget about "List" -- now I changed to "Repeater"

    my component is displayed as onyx.Popup -- and within the onyx.Popup, I have kind: "Repeater", and within Repeater, I have kCartItem, looks like below
    	components: [		
    		{kind: "FittableRows", components:[
    			{kind: "onyx.PickerDecorator",  showing: true, components: [
    						{style: "min-width: 60px;"},
    						{name: "quantityPicker", kind: "onyx.Picker"}
    			]}	
    		]},
    		{kind: "FittableRows", ontap: "tapItem", layoutKind: "FittableRowsLayout", components: [
    			{name: "name", fit: true},
    			{kind: "FittableColumns", , components: [
    				{name: "quantity", content: "1"},
    				{name: "price", content: "$"}
    			]},
    			{name: "title"},
    		]}
    	],
    
    Could it be that onyx.List is not get along with onyx.Picker, and now onyx.Picker is not get along with onyx.Popup?
  • The only odd interaction I know of off the top of my head is when the Popup is floating and there is a render call made while it is open (the floating flag prevents the Popup from being re-generated, so it becomes orphaned and won't respond i.e. won't dismiss). Is anything like that happening in your code?

    I also created a simple fiddle using your components, but don't seem to have an issue with closing the popup. Is this roughly similar to the approach you took? http://jsfiddle.net/aarontam/78xLh/
  • edited February 2014
    Thanks aarontam, i tried to simplify further my code to mimic your jsfiddle sample. With below code, if I uncomment //this.$.cartItems.setCount(3); inside showPopup function, then I can't dismiss the popup.
    Would you please advice me what went wrong here?
    enyo.kind({
    	name: "kCartPopup",
    	kind: "enyo.FittableRows",
    	components: [
    		{kind: "onyx.IconButton", src: "/assets/client/icon-calendar.png",  name: "buy_button", ontap: "showPopup", popup: "cartPopup"},
    		{name: "cartPopup", classes: "onyx-sample-popup", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", scrim: true, 
    components: [
    			{kind: "Repeater", name: "cartItems", count: 2, components: [
    				{name: "divider", classes: "list-sample-contacts-divider"},
    				{name: "item", kind: "kCartItem", classes: "line-item enyo-border-box"}
    			]}
    		]}
    	],
    	create: function () {
    		this.inherited(arguments);
    	},
    	showPopup: function (inSender) {
    		this.$.cartPopup.show();
    		//this.$.cartItems.setCount(3);
    		return;	
    	}
    })
  • edited February 2014
    Thanks for posting that sample - setCount triggers a render that might be related to the issue I referenced above. I also realized that this is happening just in 2.2 and not 2.3. Are you using 2.2 for any specific reason? If you want to stay with 2.2, I believe you can just change the order of the calls in showPopup:
    showPopup: function (inSender) {
        this.$.cartItems.setCount(3);
        this.$.cartPopup.show();
        return; 
    }
  • edited February 2014
    Thank you aarontam. Indeed your suggestion works again. By changing the order, I don't have any issue with closing Popup. However, as soon as I changed the order, the onyx.Picker that is defined inside kCartItem is having incosistent behaviour. For the first few click the picklist is always rendered behind the popup.

    Probably I need to upgrade to 2.3 due to above reason..
  • edited February 2014
    Sorry about that, the suggestion might not have been the best one as they are both in the same floating layer and the z-index of the onyx.Popup can be greater than the z-index of the onyx.Picker as the call to show the onyx.Popup is made later. If you don't need the scrim you can set floating:false for the onyx.Popup, otherwise you might try setting the defaultZ property of onyx.Popup to a value less than the default 120.
  • edited February 2014
    Aarontam, following your suggestion, I added style:"z-index:1500!important;" at onyx.Picker, and all works perfectly now. I really appreciate all your help, and thank you so much. You're not only very helpful but also superb!"
Sign In or Register to comment.