Opened 10 years ago
Closed 10 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)
Change History (15)
Changed 10 years ago by
Attachment: | rich-html.png added |
---|
Changed 10 years ago by
Attachment: | NOT desired.png added |
---|
Changed 10 years ago by
Attachment: | Screen shot 2011-03-20 at 9.45.08 PM.png added |
---|
Changed 10 years ago by
Attachment: | Screen shot 2011-03-20 at 9.45.22 PM.png added |
---|
Another Example - 2
comment:1 Changed 10 years ago by
Component: | General → Dijit - Form |
---|---|
Milestone: | tbd → 1.6.1 |
Owner: | changed from anonymous to bill |
Summary: | dijit.form.FilteringSelect labelAttr being copied into input text as of 1.6 but is this really desired behavior? → 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 10 years ago by
Resolution: | → fixed |
---|---|
Status: | new → 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.
comment:4 Changed 10 years ago by
comment:5 Changed 10 years ago by
Resolution: | fixed |
---|---|
Status: | closed → 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 10 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
Hmm, well in the onChange handler you could set this.focusNode.value = this.item.labelAttr.
comment:7 Changed 10 years ago by
Resolution: | fixed |
---|---|
Status: | closed → 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 10 years ago by
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 10 years ago by
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:11 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
Another Example - 1