dojo FilteringSelect event to fire when 'X' is clicked

Question

Is it possible to have an event fire when a user clicks on the X button inside a FilteringSelect. The X clears the users input, but the onChange event doesn't fire. Thanks!

score 0 · Accepted Answer · edited May 23 '17 at 12:19

I assume that you refer to the X button that Internet Explorer displays into input text boxes. Other browsers do not display this. FilteringSelect uses a regular input box, so you can refer to general answers about this issue: Event fired when clearing text input on IE10 with clear icon

As you see there are several approaches. You can use the oninput event to check when the displayed value becomes an empty string (either because the user clicked the X button or because he pressed backspace to delete the last character). In this case you should monitor not the FilteringSelect itself, but its internal textbox (as shown in the example below).

There is also the option to hide this X button with a style:

.yourclass input[type=text]::-ms-clear  {
    display: none;
}

require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/on", "dojo/domReady!"
], function(Memory, FilteringSelect, on){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"California", id:"CA"},
            {name:"Colorado", id:"CO"},
            {name:"Connecticut", id:"CT"},
            {name:"Delaware", id:"DE"}
        ]
    });

    var filteringSelect = new FilteringSelect({
        id: "stateSelect",
        name: "state",
        value: "CA",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect");
    filteringSelect.startup();
  
    on(filteringSelect.textbox, "input", function(event) {
      if (filteringSelect.textbox.value == "")
      {
        window.alert("Cleared");
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
<input id="stateSelect">
</div>

dojo FilteringSelect event to fire when 'X' is clicked

1 Answers1