Opened 3 years ago

Closed 3 years ago

#12483 closed enhancement (fixed)

FilteringSelect: labelAttr being copied into input text as of 1.6 but is this really desired behavior?

Reported by: jchase Owned by: bill
Priority: high Milestone: 1.6.1
Component: Dijit - Form Version: 1.6.0
Keywords: Cc:
Blocked by: Blocking:

Description

Refs #11144

I have a situation where I use the rich html capabilities of a FilteringSelect via labelAttr & labelType="html", but definitely do not want the contents of the labelAttr to be copied back into the input text - I need the searchAttr value instead (or a way to specify something different for the input text. This was working great in 1.5 but then as of 1.6 it was changed.

A perfect example of the desired behavior is Google Suggest (the older search bar). When you type a search term, the dropdown contained a rich-html list of suggestions with not only the word but the number of listings available displayed as subtext below it. But the search term itself would never contain the subtext itself when going to search!

The beauty of specifying labelType="html" was that you could create a rich-html dropdown with all sorts of additional information, logos, subtext, etc, but when a choice was selected the input text contained whatever the searchAttr was, which was desired.

I'd suggest at least having an option to retain searchAttr as the final input text.

Attached some sample files of what I'm describing.

Attachments (4)

rich-html.png (69.5 KB) - added by jchase 3 years ago.
NOT desired.png (12.4 KB) - added by jchase 3 years ago.
Screen shot 2011-03-20 at 9.45.08 PM.png (11.1 KB) - added by jchase 3 years ago.
Another Example - 1
Screen shot 2011-03-20 at 9.45.22 PM.png (11.0 KB) - added by jchase 3 years ago.
Another Example - 2

Download all attachments as: .zip

Change History (15)

Changed 3 years ago by jchase

Changed 3 years ago by jchase

Changed 3 years ago by jchase

Another Example - 1

Changed 3 years ago by jchase

Another Example - 2

comment:1 Changed 3 years ago by bill

  • Component changed from General to Dijit - Form
  • Milestone changed from tbd to 1.6.1
  • Owner changed from anonymous to bill
  • Summary changed from dijit.form.FilteringSelect labelAttr being copied into input text as of 1.6 but is this really desired behavior? to FilteringSelect: labelAttr being copied into input text as of 1.6 but is this really desired behavior?

As you sort-of implied I did this intentionally in [22539] to make the labelAttr and labelFunc behavior consistent. But I can see why you at least want to have an option to control what gets copied into the <input>. I'll look into that.

comment:2 Changed 3 years ago by bill

  • Resolution set to fixed
  • Status changed from new to closed

(In [24211]) On further consideration, when selecting an item from the drop down list, write searchAttr into the <input> field rather than the label from the selected drop down item. The label in the drop down is by default searchAttr, but can be overridden by specifying labelAttr or labelFunc.

This reverts ComboBox to the 1.5 behavior when labelAttr is specified, and makes Combox's behavior consistent when labelFunc is specified.


Refs #11144, fixes #12483 on trunk, !strict.

comment:3 Changed 3 years ago by bill

Same change on 1.6/ branch: [24210].

comment:4 Changed 3 years ago by bill

(In [24276]) [24210] removed _helperSpan but I missed a spot, refs #12483 !strict

comment:5 Changed 3 years ago by mwpalmer

  • Resolution fixed deleted
  • Status changed from closed to reopened

Application was utilizing the fact the label was put into the input box after selecting. What would be the work around to have the original behavior? Thanks!

comment:6 Changed 3 years ago by bill

  • Resolution set to fixed
  • Status changed from reopened to closed

Hmm, well in the onChange handler you could set this.focusNode.value = this.item.labelAttr.

comment:7 Changed 3 years ago by mwpalmer

  • Resolution fixed deleted
  • Status changed from closed to reopened

Gave that a try, but no go. Value is undefined when I try that in the onChange at that point. Let me provide a little more info and see if a work around is possible.

Using labelFunc to populate the list with values. The input box is empty and the user clicks the arrow and chooses a value from a list of several items.

In 1.6.0 it worked fine and placed the value there. List items were something like "apple - red", "banana - yellow", etc.
In 1.6.1 if you select "apple - red" it now would put "apple" in the input box.
In onChange checked this.item.labelAttr and it is undefined.

Any other workarounds??? Would really like to upgrade to latest version, and this is the last piece of the puzzle to get that done.

Thanks again!

comment:8 Changed 3 years ago by bill

Hmm, I'm unclear exactly where the issue is. If the problem is getting a pointer to the selected item, then I think (instead of onChange) using myComboBox.watch("item", ...) will work.

If the problem is getting the label from the item, then myComboBox.store.getLabel(item) should work, or myComboBox.labelFunc(item, myComboBox.store).

And if the problem is that your set gets overwritten by code that runs later, then a setTimeout() or other methods will fix it.

So, putting that altogether, this works for me:

myComboBox.watch("item", function(name, oval, nval){
   if(nval){
       setTimeout(function(){
          myComboBox.focusNode.value = myComboBox.labelFunc(nval, myComboBox.store);
       }, 0);
   }
});

comment:9 Changed 3 years ago by mwpalmer

Hi,

Thanks much for the help. Ended up using this.item.ZZZ, where ZZZ was the field I was interested and just recreated the label in the input box based on the values needed. Just a small extra step and happy to be able to complete upgrade. Please move ticket to resolved. :)

Have a great day!

comment:10 Changed 3 years ago by bill

OK, great.

comment:11 Changed 3 years ago by bill

  • Resolution set to fixed
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.