instructure / ic-autocomplete Goto Github PK

1. type an invalid entry into the field
2. click away
   • observe errors

and then allow people to extend combobox with their own convenience components, giving them control over the dropdown arrow, etc.

I am trying to use ic-autocomplete in an hbs template and I get the error:

Uncaught TypeError: template.buildRenderNodes is not a function

I am using the following:

• Ember 1.13.5
• Ember Data 1.13.7
• jQuery 2.1.4
• Ember CLI 1.13.6

bower.json
"dependencies": {
"ember": "1.13.5",
...
"ic-autocomplete": "~0.2.0"
...

ember-cli-build.js
...
app.import('bower_components/ic-styled/main.js');
app.import('bower_components/ic-autocomplete/dist/globals/main.js');

Is ic-autocomplete compatible with the version of ember and ember cli that I am using?

1. type into the field until only one result is left
2. hit the down arrow
   • item does not get focus

v.

1. select something with the mouse
2. hit the down arrow
   • item gets focus

The partial text selection works fine but feels weird

After updating to latest Ember beta (1.8.0), ic-autocomplete stopped working completely. Can you please confirm if this is an ic-autocomplete/styled issue or Ember's issue?

Error output

TypeError: undefined is not a function
    at null.injectStyles (http://0.0.0.0:4200/assets/vendor.js:100687:32)
    at applyStr (http://0.0.0.0:4200/assets/vendor.js:32458:34)
    at sendEvent (http://0.0.0.0:4200/assets/vendor.js:27587:13)
    at __exports__.default.Mixin.create.trigger (http://0.0.0.0:4200/assets/vendor.js:44582:9)
    at apply (http://0.0.0.0:4200/assets/vendor.js:32447:27)
    at superFunction [as _super] (http://0.0.0.0:4200/assets/vendor.js:28919:15)
    at EmberObject.extend.trigger (http://0.0.0.0:4200/assets/vendor.js:53585:21)
    at apply (http://0.0.0.0:4200/assets/vendor.js:32447:27)
    at superWrapper [as trigger] (http://0.0.0.0:4200/assets/vendor.js:32024:15)
    at EmberRenderer.Renderer.willInsertElement (http://0.0.0.0:4200/assets/vendor.js:52140:32)
    at EmberRenderer.Renderer_renderTree [as renderTree] (http://0.0.0.0:4200/assets/vendor.js:23775:18)
    at Object.merge.ensureChildrenAreInDOM (http://0.0.0.0:4200/assets/vendor.js:53480:22) 

Source of the issue

Ember.Component.reopen({
    injectStyles: function() {
      var klass = this.constructor;
      var Style = lookupStyleComponent(this);
      if (!Style || Style._injected) { return; }
      Style._injected = true;
      var name = getStyleComponentName(this);
      var css = Style.create().renderToBuffer().buffer; // <<< This line
      inject(name, css);
    }.on('willInsertElement')
  });

to allow free-form autocomplete, we need access to the input's value

Would be nice to have a way to bind classes to the input, I tried looking around and I could not find anything that would allow this.

I am not able to use with ember 1.9 which requires handlebars 2.0. When I manually require handlebars 2.0 inside of broccoli-template-compiler/ember-template-compiler, I get an error trying to build:

Any suggestions?

$ broccoli build dist
    File: templates/autocomplete-css.js
    Error: Line 2: Unexpected identifier
        at throwError (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2579:21)
        at throwUnexpected (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2623:13)
        at expect (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2650:13)
        at parseArrayInitialiser (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2783:21)
        at parsePrimaryExpression (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:3076:20)
        at /Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
        at trackLeftHandSideExpressionAllowCall (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5563:61)
        at parsePostfixExpression (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:3214:20)
        at /Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
        at parseUnaryExpression (/Volumes/Macintosh_HD/Users/shauncutts/src/other/ic-autocomplete/node_modules/broccoli-dist-es6-module/node_modules/broccoli-es6-module-filter/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:3278:16)

    Build failed

• input should register itself, not get selected by the parent
• move handler methods into on() methods with real names
• explain the craziness, maybe find a way out of some of it

I keep getting Handlebars error: Could not find property 'ic-autocomplete' on object ...

Here is my setup. I have the same setup for ic-droppable and it's working great.

app.import('vendor/ic-autocomplete/dist/named-amd/main.js', {
  exports: {
    'ic-autocomplete': ['default']
  }
});

app.import('vendor/ic-styled/main.js');

Is there something missing?

Is there a way to display the list by just clicking or focus (without using the indicator to the right)?

Try typing "New York" into the input and you won't be able to get past "New"

I used pull request #30, but still getting an error:

Error: Assertion Failed: template must be a function. Did you mean to call Ember.Handlebars.compile("...") or specify templateName instead? at new Error (native) at Error.EmberError (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:41133:23) at Object.Ember.assert (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:32532:15) at CoreView.extend.render (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:73318:19) at EmberRenderer_createElement [as createElement] (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:68963:16) at EmberRenderer.Renderer_renderTree [as renderTree] (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:37456:24) at Object.merge.ensureChildrenAreInDOM (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:70613:22) at View.extend._ensureChildrenAreInDOM (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:70576:27) at Queue.invokeWithOnError (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:29455:20) at Object.Queue.flush (http://localhost:7000/assets/admin-6774ba8c135d66de6c0ffa6854176021.js:29511:13)

This is when using Ember 1.10 and the following code:

  id="users"
  value=userId
  on-input="setUserSearch"
  on-select="selectUser"
  placeholder="Add instructor"
}}

  {{#if isLoading}}
    <div style="padding: 2px 16px;">Searching for users...</div>
  {{else}}
    {{#each users}}
      {{#ic-autocomplete-option label=username value=id}}
        <img {{bind-attr src="avatar"}}> {{firstName}} {{lastName}}
      {{/ic-autocomplete-option}}
    {{else}}
      <div style="padding: 2px 16px;">No results</div>
    {{/each}}
  {{/if}}

{{/ic-autocomplete}}```

I built the library myself using the scripts included in the ./script folder.

http://movies-api.elasticbeanstalk.com seems to be down. Movies autocomplete does not work anymore.

1.Open the dropdown, and select something not immediately visible, like Massachusetts.

1. Use the down key. After you reach the last visible element, the selection instead of going lower, will wrap around and jump to somewhere above Massachusetts.

In this example:

asdf course 1 = ID 8
asdf course 2 = ID 9
asdf course 3 = ID 10

There is an observer on the value bound to the selection that logs it to the screen.

First, clicked on asdf course 2, then clicked on course 3, then moved the focus to a different element, and the value for course 1 was selected.

The closeOnFocusOut method assumes the element still exists, but this is not the case in a test environment where things are happening very quickly.

  closeOnFocusOut: function() {
    // later for document.activeElement to be correct
    Ember.run.later(this, function() {
      // TODO: maybe handle focusOut of the elements we know about instead of
      // an overarching check here? I'm sure there are bugs and edge cases I
      // can't think about here by waiting before doing these checks (destroyed
      // elements, etc.)
      if (!this.get('element').contains(document.activeElement)) {
        this.maybeSelectAutocompletedOption();
        this.close();
      }
    }, 0);
  }.on('focusOut'),

For instance, in my use case, once you click the 'create listing' button (which is what would remove focus from the autocomplete), the modal that contains the autocomplete element is removed. The closeOnFocusOut method gets triggered after the element is gone, and it errors.

  fill_in_course_autocomplete \
    with: 'tik',
    options: data,
    select: 'tiki 101'
  click_button 'Create Listing'

My workaround is to focus out before killing the modal and sleep for 100ms to let this method run without issues:

  find('.modal-body').click
  sleep 0.1

Ideally the closeOnFocusOut method would protect against referencing a destroyed element.

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..

Causes #3 and is just generally weird. Was originally a shortcut to get the keyboard nav to work when you switch from mouse to keyboard, but we just need to track it separately.

maybe only selectOption while autocompleting if they tab away or hit enter.

current behavior causes #1 and prevents people from repopulating the list on-select.