arcbees / gwtchosen Goto Github PK

Hello.

Considering the CSS is bundled with the widget, it would IMO make sense to also bundle the "chosen-sprite.png" file, so one wouldn't need to add it manually :)

Regards

The subject says it all.
I think the reason for this bug is that field ChosenImpl.currentValue is never set to null in method ChosenImpl.resultsReset(Event e), while it should.

I think, a simple
{code}
currentValue = null;
{code}

put just above
{code}
fireEvent(new ChosenChangeEvent(null, this));
{code}

in the aforementioned method should fix the issue.

Using the setVisible() method on the ChosenListBox widget seems to completly break it. How to correctly hide and show the widget? I was semi-succesful with setVisible(false) and then forceRedraw() but this gives me kind of creepy feeling when using it. Have I overseen something?

Hello,

I'm just trying to integrate GWT Chosen in my test webapp.
Here is what I get :

I guess it has to do with the fact that searchChoices is never initialied when using a single selection mode ?
Dom

Caused by: java.lang.NullPointerException: null
at com.watopi.chosen.client.ChosenImpl.release(ChosenImpl.java:158)
at com.watopi.chosen.client.Chosen.destroy(Chosen.java:97)
at com.watopi.chosen.client.gwt.ChosenListBox.onUnload(ChosenListBox.java:261)
at com.google.gwt.user.client.ui.Widget.onDetach(Widget.java:386)
at com.google.gwt.user.client.ui.AttachDetachException$2.execute(AttachDetachException.java:43)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doDetachChildren(Panel.java:175)
at com.google.gwt.user.client.ui.Widget.onDetach(Widget.java:391)
at com.google.gwt.user.client.ui.Composite.onDetach(Composite.java:192)
at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:460)
at com.google.gwt.user.client.ui.Panel.orphan(Panel.java:198)
at com.google.gwt.user.client.ui.SimplePanel.remove(SimplePanel.java:117)
at com.google.gwt.user.client.ui.SimplePanel.setWidget(SimplePanel.java:150)
at com.google.gwt.user.client.ui.SimplePanel.setWidget(SimplePanel.java:129)
at com.mvp4g.example.client.view.RootView.setBody(RootView.java:38)
at com.mvp4g.example.client.presenter.RootPresenter.onSetBody(RootPresenter.java:23)
at com.mvp4g.client.Mvp4gModuleImpl$2.setBody(Mvp4gModuleImpl.java:277)
at com.mvp4g.example.client.presenter.Page2Presenter.onGoToPage2(Page2Presenter.java:15)
at com.mvp4g.client.Mvp4gModuleImpl$2.goToPage2(Mvp4gModuleImpl.java:156)
at com.mvp4g.example.client.presenter.MenuPresenter.goToPage2(MenuPresenter.java:24)
at com.mvp4g.example.client.view.MenuView.onClickPage2(MenuView.java:34)
at com.mvp4g.example.client.view.MenuView_MenuViewUiBinderImpl$2.onClick(MenuView_MenuViewUiBinderImpl.java:66)
at com.google.gwt.event.dom.client.ClickEvent.dispatch(ClickEvent.java:54)
at com.google.gwt.event.dom.client.ClickEvent.dispatch(ClickEvent.java:1)
at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)
at com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40)
at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)
at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)
at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)
at com.google.gwt.user.client.ui.Widget.fireEvent(Widget.java:129)
at com.google.gwt.event.dom.client.DomEvent.fireNativeEvent(DomEvent.java:116)
at com.google.gwt.user.client.ui.Widget.onBrowserEvent(Widget.java:177)
at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1351)
at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1307)
at sun.reflect.GeneratedMethodAccessor39.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)
at sun.reflect.GeneratedMethodAccessor33.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Thread.java:662)

All icons used by chosen are gathered in one file : chosen-sprite.png. This file is located in the public folder of the library and is deployed in folder containing all js files generated by GWT.

The problem is if the html page loading the javascript is in an other directory, the chosen-sprite cannot be found by the css.

Workaround : copy this file in the same directory of your html file.

I found gwtchosen support opt group however i can not found guide for how to use it, so could you add some instruction to here: http://jdramaix.github.com/gwtchosen/?
BTW i found there is one extension to the native Listbox: OptGroupListBox, which might be help.

http://code.google.com/p/google-web-toolkit/issues/attachmentText?id=1167&aid=11670011000&name=OptGroupListBox.java&token=IWznnXYY-bJUSocwbKU6CkCKH14%3A1348839220419

Thanks.

The below snapshot illustrates this issue:

It seems to me that it may be related to the fact that the width of the select tag is narrower in Chrome than in Firefox.
As the select tag serves as a reference to compute the width of the ChosenListBox this may be a clue.

HI, i'm using chosenlistbox widget, my app needs to update chosen option items dynamically at runtime, my way is to clear all the old option items and add new ones to them, like below:

chosen.clear();
chosen.addItem("myitem");

However it still keep the old options and did not update at all. I'd like to know the correctly ways to achieve this behavior.

Thanks.

When the GWTChosen popup is displayed, and the user clicks outside the popup, an exception is generated due to a javascript error.

The reason (I thiunk) is as follows:
ChosenImpl.java, line 1353 (GWTChosen V1.3.0-SNAPSHOT):
{quote}
$li.css("display", "auto");
{quote}

According to http://stackoverflow.com/questions/6556994/css-display-auto
"auto" is not a valid value for the display property. Instead, set display to ''

When creating 2 instances with two different options and two different custom resources,
Chosen ignores the second one.

Stuff I've tried and didn't work:
Seperating to 2 different views, calling ensureInjected(), renaming of CSS interfaces.

Any thoughts on how I can fix this?

When I run on devmode ou when I compile my project I always get the following warning:

Template with variable in CSS attribute context: The template code generator cannot guarantee HTML-safety of the template -- please inspect manually or use SafeStyles to specify arguments in a CSS attribute context

As far as I could tell there is no way to define custom search functionality. This is quite useful if I can't dynamically add the list of options during runtime (i.e. if there are too many values).
If this would be supported one could have a typeahead/suggestbox type of widget.
There are different ways to solve this issue:

1.) expose searchField in order to attach KeyUpHandlers -> widget user can add a custom handler, use the typed in text and query the database and populate the ChosenListBox with new values from the database

2.) Create a new event (i.e SearchTextChangeEvent ) and fire it when the user types something into the searchField.

3.) Extract/abstract search functionality (have a default fallback back to the current solution).

I tried gwtchosen widget, i.e. ChosenListBox, which is so slow in debug mode, i tried the demo but behavior is not good too. Someone else who met this problem too?

I didn't try the gwtquery version yet.
BTW i on Win7 with 8GB RAM, 2.2G CPU, GWT 2.5.0-rc1 and Chrome 22

First setup an issue for deploying to maven central. This issue will record the issue and events that occur with it.

Add new item using method addItemToGroup(String item, String value).
Try getValue of this item, but this method return itemText instead of value.
Bug in method public void insertItemToGroup(String item, String value, int groupIndex, int itemIndex) , witch set item text instead of item value.

In either of your examples on http://jdramaix.github.com/gwtchosen/ if you enter a space you get a No results message even if there is a match.

For example type united s

Up until the d you see the match, as soon as you type the space it says No results. Doesn't seem to be an issue on the jQuery version.

Hi,

Cloned your project and then mvn install.

First problem encountered is that <gQueryVersion>1.1.1-SNAPSHOT</gQueryVersion> cannot be resolved by maven.
I changed this to <gQueryVersion>1.2.0</gQueryVersion>

I think that as a consequence, I had to change the GWT version to 2.5.0-rc1, that was at least the error that maven spit out next.
So now I have <gwtversion>2.5.0-rc1</gwtversion> in my pom.

Now I finally arrived at building it more or less, that is except for the sample :

[INFO] Building war: /home/koen/src/gwtchosen/sample/target/chosen-sample-1.0-SNAPSHOT.war
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO] 
[INFO] Chosen plugin project ............................. SUCCESS [0.302s]
[INFO] Chosen plugin for gQuery .......................... SUCCESS [0.935s]
[INFO] Chosen gQuery plugin example ...................... FAILURE [52.105s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 53.585s
[INFO] Finished at: Wed Aug 29 12:06:04 CEST 2012
[INFO] Final Memory: 9M/155M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project chosen-sample: Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) -> [Help 1]

cheers

Koen

PS: notorious for hating maven

I try to replace the GWT ListBox and use Chosen ListBox but I get this weird display of having 2 ListBoxes instead of only 1 Chosen ListBox. The first one is the Normal GWT ListBox and next to it is the ChosenListBox.

Here is my code in UiBinder.

   <g:VerticalPanel width="100%" horizontalAlignment="ALIGN_RIGHT">
    <g:HorizontalPanel>
        <g:Label ui:field="lblUserEmailAddress" text="Guest" />
        <g:Label text="|" addStyleNames="{style.separator}" />
        <g:Anchor ui:field="signingLink" />
        <chzn:ChosenListBox ui:field="lbLoginProvider"
            allowSingleDeselect="true" placeholderText="Choose a login..." />
        <g:Button ui:field="btnLogIn" text="Login" height="10"
            width="20" />
    </g:HorizontalPanel>
</g:VerticalPanel>

and my code in its implementation.

@UiField(provided = true)
ChosenListBox lbLoginProvider;
public MenuViewImpl() {
    if (!ChosenListBox.isSupported()) {
        Window.alert("Chosen ListBox not supported");
    }
    lbLoginProvider = new ChosenListBox(false);
    initWidget(uiBinder.createAndBindUi(this));
    init();
}

private void init() {

    lbLoginProvider.addItem("Test1");
    lbLoginProvider.addItem("Test2");
    lbLoginProvider.addItem("Test3");

}

Hello.

The width of "placeholder" element (first li of the lu) seems wrong sometimes.

When I use a "too long" text, the width isn't sufficient, whereas if I reduce the text it's ok.

I'm using the ChosenListBox directly, not hidden by default.

Code that i think that cause the problem:
in ChosenImpl

    @Template("<ul class=\"{0}\"><li class=\"{1}\"><input type=\"text\" value=\"{2}\" class=\"{3}\" autocomplete=\"off\" style=\"width:25px;\"/></li></ul><div class=\"{4}\" style=\"left:-9000px;\"><ul class=\"{5}\"></ul></div>")
    SafeHtml contentMultiple(String chznChoicesClass, String chznSearchFieldClass,
        String defaultText, String defaultClass, String chznDropClass, String chznResultClass);

    @Template("<a href=\"javascript:void(0)\" class=\"{0} {1}\"><span>{2}</span><div><b></b></div></a><div class=\"{3}\" style=\"left:-9000px;\"><div class=\"{4}\"><input type=\"text\" autocomplete=\"off\" /></div><ul class=\"{5}\"></ul></div>")
    SafeHtml contentSingle(String chznSingleClass, String chznDefaultClass, String defaultText,
        String dropClass, String chznSearchClass, String chznResultClass);

When we use the chosen in RTL the choice list is always open.
That happens because the style is hard-coded and cannot be replaced from left to right.
if you will enter the style to be part of the CSS it should be solved automatically.

Bux fixing release

I have

<chzn:ChosenListBox maxSelectedOptions="5"
 placeholderText="select contract" ui:field="contractListBox">
</chzn:ChosenListBox>

and

@UiField
ChosenListBox contractListBox;

when my activity starts, a list is passed to the view and

    public void setContractsList(ContractsList contractsList) {
        contractListBox.clear();
        for (Contract contract : contractsList.getContracts()) {
            GWT.log("adding contract " + contract.getContractNumber());
            contractListBox.addItem(contract.getContractNumber(), contract.getContractNumber());
        }
    }

I see in the log :

[INFO] [timesheet] - adding contract 000001

=> BUG ? : the ChozenListBox is displayed, the list is empty;

The second time when this is executed, it displays correctly ?!!

This seems like it should at least be an option. We have a ChosenListBox in a grid and want to handle Enter ourselves.

1. tab to ChosenListBox
2. type something
3. hit Enter to pick an element
4. hit Enter again (and it gets swallowed by .preventDefault'd as per: ChosenImpl:607)

It would be very useful if an item could be added when no search results match. Similar to how the To, Cc and Bcc fields work in hotmail.

I tried this using UiBinder and got an exception (something with attach/detach):

<g:DecoratedPopupPanel glassEnabled="true" modal="true">
<g:HTMLPanel>

   <chzn:ChosenListBox ui:field="tagsSelectionBox" maxSelectedOptions="-1" placeholderText="Add Tags..." noResultsText="Create tag...">
        ...
   </chzn:ChosenListBox>

</g:DecoratedPopupPanel>
</g:HTMLPanel>

I tried using @UiField(provided=true) on my view, but then I get a regular box. @jDramaix, any clues?

Brandon,

May I kindly ask you to produce a new release of gwtchosen ? Ideally I would like to create a (non-snapshot) 1.2.0-alpha1.

I have another issues I want to fix for the real 1.2.0 release but I need asap a non-snapshot release for zafin.

Thanks

workaround :

chzn.clear();
chzn.update();

A useful enhancement to GWT-Chosen multiple with regard to UI would be to add a CSS class to distinguish a ul.chzn-choices with or without choice(s) (.search-choice).
We could then target and style ul.chzn-choices depending on whether it contains selected choice(s) or not. A class name like say chzn-choices-selected would do the trick as illustrated in the second screenshot.

No Choice selected:

Choices selected:

Hi,
the problem is that if the Chosen is placed in TabPanel in a tab which is not selected by default, it has a zero length.
Please find the illustration sample here: https://github.com/surg/gwtchosen-tabs

Unfortunately I don't have an idea how to fix this (more or less) clearly :(
I guess some kind of workaround might help...

thanks,
Iurii

Context:
When a ChosenListBox button is "unfortunately" at the bottom of the screen, then when I click on the button so the list appears under the button...This has the effect to "destroy my layout".

Issue:
The chosen widget does not automatically use the free visible space on the screen...The list of items should be displayed vertically in 2 directions (above or under the button).

Image illustrating the case:

When the list is open, we can select an option with tab. But when it's closed, we should be able to go to the next widget with tab.

The problem is reproducible with the sample.

See screenshot.

I am creating the listbox as follows:

    listBox = new ChosenListBox(allowMultiple);
    listBox.addStyleName("smart_listbox");
    listBox.setPlaceholderText(text);

Unfortunately I can't style the div with the generated chozen_container__x id; it is being initialized with a width which is too narrow to display the placeholder text.

it seems there is no easy way to override the GWTChosen CSS with a custom one.
(For example, we want smaller paddings and smaller font in the GWTChosen popup list.)

Would it be possible to slightly alter the code so that the user of the control can provide its own instance of com.watopi.chosen.client.resources.Resources?
That would be similar in spirit to GWT's Cell widgets (CellTable/CellTree/CellList) which all do have a constructor which takes a user-supplied Resources object.

Perhaps the following small change would work:

1. ChosenOptions is extended with setResources()/getResources(). This would be the API the user will use to supply custom Resources
2. ChosenImpl is changed to use the Resources object supplied via ChosenOptions, or if that one is null, to fall back to constructing its own Resources object via GWT.create()
3. Obviously, Resources.INSTANCE has to be moved somewhere else, as now com.watopi.chosen.client.resources.Resources (and com.watopi.chosen.client.resources.ChosenCss) become an API

Let me know if there are gaps in the above suggestion and/or if I've missed the elephant in the room and there is an easier, out-of-the box way to customize Chosen's appearance.

Code which fails:

@UiField ChosenListBox chosenLB;

@UiHandler("chosenLB")
public void onChosenChange(ChosenChangeEvent e) {
}

Description:

If i try to use the @UiBinder annotation for adding a ChosenChangeHandler instead of adding it manually I get following error:

[ERROR] Field 'filterSampStat' does not have an 'addChosenChangeEvent.ChosenChangeHandler' method associated.

Problem:

According to http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/uibinder/rebind/HandlerEvaluator.java:

Checks if a specific handler is valid for a given object and return the
method that ties them. The object must override a method that returns
{@link com.google.gwt.event.shared.HandlerRegistration} and receives a
single input parameter of the same type of handlerType.

However in the ChosenListBox the addChosenChangeHandler isn't overridden (in contrast to the deprecated addChangeHandler).

Solution:

Create a HasChosenChangeHandlers interface similar to the HasChangeHandlers interface of the ListBox

public interface HasChosenChangeHandlers extends HasHandlers {

  HandlerRegistration addChosenChangeHandler(ChosenChangeHandler handler);
}

and implement it in the ChosenListBox

public class ChosenListBox extends ListBox implements HasChosenChangeHandlers {
   [...]

    @Override
    public HandlerRegistration addChosenChangeHandler(
            ChosenChangeHandler handler) {
        return ensureChosenHandlers().addHandler(ChosenChangeEvent.getType(),
                handler);
    }
}

Steps for reproduce:

1. Add quite big amound of items to chosen groups. E.g.:

   for(int i=0; i<20; i++){
   chosen.addGroup("group"+i);
   for(int j=0; j<50; j++){
   chosen.addItemToGroup("item"+j);
   }
   }
   chosen.update();

2. Run clear() method.

3. Reproduce step 1 again.

Time for adding items to chosen in 3d step will be bigger, then in 1st. And every time you reload items to chosen it become bigger than in previous reloading.

The ChosenListBox gets cut-off in DockLayoutPanels when the opened listbox exceeds the size of e.g. the north widget.

I have following UiBinder code:

<g:LayoutPanel>
    <g:layer top="0" height="5em" left="0" right="0">
        <g:HTMLPanel addStyleNames="{style.title}">
        SOME TITLE
       </g:HTMLPanel>
    </g:layer>
    <g:layer top="5em" height="15em" left="10px" width="600px">
        <g:HTMLPanel>
        <div>
          <g:ValueListBox ui:field="somelistbox" />
          <chzn:ChosenListBox ui:field="filter" placeholderText="Filter countries...">
              <g:item value=""></g:item>
           </chzn:ChosenListBox>
           <g:TextBox ui:field="textbox" />
         </div>
     </g:HTMLPanel>
      </g:layer>
</g:LayoutPanel>

however when gwtchosen is rendered the width of all the elements is 0 see HTML source below:

<div id="chozen_container__0_chzn" class="GEMVWXACIN GEMVWXACLN GEMVWXACJN" style="width: 0px; ">
    <a href="javascript:void(0)" class="GEMVWXACHO GEMVWXACNN" tabindex="-1">
         <span>Filter countries...</span>
         <div><b></b></div>
    </a>
   <div class="GEMVWXACAO" style="left: -9000px; width: 0px; top: 24px; ">
         <div class="GEMVWXACGO"><input type="text" autocomplete="off" style="width: 0px; " tabindex="0">
         </div>
    </div>
 </div>

Now we have a build server set up, we should add cucumber tests for this component in order to check that new developments don't break the component.

editor = new ChosenListBox();
editor.clear();
editor.addItem("a");
editor.update();
editor.forceRedraw();
editor.setFocus(true);

The above code does not set the browsers focus onto the chosen listbox.

addItemToGroup does not store value. Looking in the code the addItemToGroup ignores the value of the item passed in.

Otherwise: fantastic control Thanks!

Gene

IGNORE: I see #28 has fixed this.

I believe it's a fairly common usage to use GWTChosen to build up fields for a faceted search (in the countries example this would be selecting items in the control to trigger a "search for results in Brazil and Algeria").

It would be a great step forward to include a boolean +/- UI toggle element at the left-hand side of the widget. So, after adding Brazil and Algeria items to the multi-select, the user could click on the + icon at the left-hand of the Algeria widget. The '+' would turn into '-', and the app would process this as "search for results in Brazil but not Algeria".

I'm not familiar with the development flow of the widget - maybe the normal flow would be for this to be included in Chosen and then cascade into gwtchosen.

If you try to setEnable to false it's setted, but, the Widget doesn't disable.

I added Monitor Pulls to the build server, so each pull will get build and notify the pull of the update.

http://teamcity.gonevertical.org/admin/editBuildRunners.html?id=buildType:bt19

This is what it does:
http://c.gwt-examples.com/home/maven/build-server/team-city/github-pull-notification-app

If you select some value in chosen and immediatly click to CheckBox, you'll get all checkBox events, but after that it's value return back to previous. It happens because chosen binds click event handler to all document and unbinds it only on blur with 100ms delay, but doesn't do that when you select one of its items.
My hack to prevent it: always add one more ChosenChangeHandler to chosen and fire some click event in it (e.g. GQuery.$(Document.get()).click(); ).

See pull request added. - #45

Thanks
Gene

Just a little note: Use spaces instead of tabs so as reading code online looks better. Maybe you could follow gwt standards.

Take a look to this code:
https://github.com/jDramaix/gwtchosen/blob/master/plugin/src/main/java/com/watopi/chosen/client/Chosen.java

Hello.

The documentation at http://jdramaix.github.com/gwtchosen/ states to update the list through:

$("#mySelect").as(Chosen).update();

But the method doesn't exist.

I wrote a GWT project for you to reproduce the bug.
https://github.com/ebouchut/gwtchosen-sandbox

It consists basically in:

• selecting a list item
• calling ChosenListBox.setSelectedItem(0)
• selecting the very same item as before

GWT-Bootstrap ListBox has a method to get item value based on the selectedindex of ListBox. But GWTChosen doesn't has this method wet.

If you want to get item value of ChosenListBox you have to get the index first. Like:

 list.getValue(list.getSelectedIndex());

When a more friendly way is like GWT ListBox, just.

 list.getValue();

I appreciate if this method incorporate GWT-Chosen. Thanks.

The issue occurs in single selection mode, when AllowSingleDeselect is true.

After the user deselect the item, next time when the user select the same item that was deselected, ChosenChangeEvent does not fire.

For example, let say the user has selected the third item. Next, the user deselect the item, the place holder text is displayed and ChosenChangeEvent is fired with the selection index equals to zero (so far so good). However, if the user select the third item again, ChosenChangeEvent failed to trigger, even though the ListBox is showing that the third item is selected.