Having some trouble with backspace

[dinomiike]

Hello! First of all, thanks to instructure and all the contributors for this great component!

I'm having a little trouble with a backspace key press. My on-input filter method starts querying an endpoint after more than 2 characters have been entered. For now, as each key is being pressed after that, a list of matching results comes back from the endpoint and is rendered in the autocomplete results filter.

Once an item shows up in the autocomplete list and the term is selected, I can't hit backspace to erase my text. For example:

I enter: the A list of options appears in my autocomplete filter list: - The First, -The Second The text in my control is set to the first option: The First, with the text "First" selected in the input box I hit backspace: the text stays the same, the input value remains the same and the same query is sent across the wire to my endpoint.

Through debugging, I see the handleKeyDown method returning the startBackspacing method when I press backspace, so it's for sure being called.

I found that if I added this.set("ignoreInputValue", true); to the startBackspacing method, the problem is solved for me, though I suspect I'm doing something wrong. Would anyone be able to help? I will include some source I'm using here:

(Disclaimer: I'm super new to ember, apologies if I'm making some glaring mistakes in the implentation)

index.hbs:

{{#ic-autocomplete
  value=selectedAttraction
  on-input="filterAttractions"
  on-select="selectAttraction" <!--- note: nothing special about this method, just a simple POST-->
  placeholder="Add Headliner/Main Attraction"
  classNames="headliner"
}}
  {{#each filteredAttractions}}
    {{#ic-autocomplete-option value=id label=name}}
      <div>{{name}}</div>
    {{/ic-autocomplete-option}}
  {{else}}
    <div>No results</div>
  {{/each}}
{{/ic-autocomplete}}

index.js: (controller)

  attractionsList: [],
  filteredAttractions: [],
  selectedAttraction: "",

  actions: {
    filterAttractions: function(autocomplete, term) {
      // only run the query after 3 characters or more
      if (term && term.length > 2) {
        var self = this;
        var store = this.store;
        store.unloadAll("attraction-option");
        var matchingSearchResults = []; // <----- This is the list of items the control will use to display the autocomplete options
        store.find("attraction-option", {q: term}).then(function (attractionList) {
          attractionList.get("content").forEach(function (attraction) {
            matchingSearchResults.push(attraction.get("data"));
          });

          self.filteredAttractions.setObjects(matchingSearchResults); // <---- set the list to be the results of the latest query
        });
      }
    },

Thank you for taking the time to read. I hope it's ok to post questions like this here..