md-autocomplete not rendering

[Baudin999]

I am trying to create a small demo application in which I demo the awesomeness which is ngMaterial, but I ran into an issue with the md-autocomplete:

version: 0.11.0
using the npm package

It does not render correctly, the races autocomplete should be rendered but is not:

The markup I use is:

<md-autocomplete flex="2" md-items="race in queryRaces(raceSearchText)"
                 md-search-text="raceSearchText"
                 md-item-text="race.name"
                 md-floating-label="Race">
    <md-item-template>
        <span md-highlight-text="raceSearchText">{{ item.name }}</span>
    </md-item-template>
    <md-not-found>
        No matches found for "{{ raceSearchText }}".
    </md-not-found>
</md-autocomplete>

I cannot reproduce the issue in a CodePen.

I can however give you a link to the GitHub repo if you need it.

Extra information:
the controller used: https://github.com/Baudin999/ckAvalon_md/blob/master/src/app/modules/characters/controllers/addCharacterController.js

The view used:
https://github.com/Baudin999/ckAvalon_md/blob/master/src/app/modules/characters/pages/add-character.html

This view is loaded in a Dialog.

[topherfangio]

There is currently a bug (#4667) where the md-items="race in queryRaces(raceSearchText)" is hard-coded to expect the word item. We should fix it soon, but just changing this to md-items="item in queryRaces(raceSearchText)" should fix the issue.

[topherfangio]

@Baudin999 A fix was just pushed for #4667 in master (8849213). Can you test it out and see if it fixes your issue?

[Baudin999]

@topherfangio Thank you for replying, will test it tomorrow morning. Changing it to 'item' did not fixed it though.

EDIT: I've just finished testing with the latest version on the master branch, the result is the same, it does not seem to fix the problem.

[Baudin999]

Might there be anything else I can try or maybe some file in the source someone can point me towards; I can try and "fix"?

[topherfangio]

@Baudin999 We've pushed a couple more fixes to the autocomplete over the last day or two. Can you try again against the latest master version?

If it still doesn't work, can you make sure to update your GitHub repo and I'll try to take a look in my off-time this weekend?

[Baudin999]

@topherfangio Thank you for the help. I have just tried the latest version in both a dialog and the home page and both do not work. I really can't find what's not working.

My repo has been updated. It will do almost anything by running the following commands:

npm install  
npm run dev

The only thing you'll have to change are the relative paths to the angular material libs. I would advice putting both the js and css files right in the root of the ./node_modules and updating the script and link references in ./src/server/pages/index.html to something like:

<link rel="stylesheet" href="/node_modules/angular-material.css">
<script src="/node_modules/angular-material.js"></script>

The reason for this is that I've setup the routes on the server this way. You can configure this in the ./src/server/server.static.js file; but this should not be necessary for testing the libs.

If you have any problems with this let me know. Just one snag, any time you change the index.html file you'll have to restart the node server by running the rs command to restart nodemon. It should be quite easy to get going.

PS: routes you'll want to test:
http://localhost:3000/#/ and
http://localhost:3000/#/characters and press the Plus button

[topherfangio]

@Baudin999 I can't seem to get your repo working. I had to globally install nodemon and browser-sync and that got me past the initial errors, but now I'm getting the following:

21 Sep 05:00:41 - [nodemon] restarting due to changes...
21 Sep 05:00:41 - [nodemon] starting `node ./out/server/server.js 1337`

/Users/topher/Documents/Development/testing/ckAvalon_md/out/server/setup.mongolab.js:11
    return new Promise(function (_resolve, _reject) {
               ^
ReferenceError: Promise is not defined
    at initializeMongoDB (/Users/topher/Documents/Development/testing/ckAvalon_md/out/server/setup.mongolab.js:11:16)
    at Object.<anonymous> (/Users/topher/Documents/Development/testing/ckAvalon_md/out/server/server.js:30:38)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

Can you test installing this on a clean machine and make sure you have all of the setup steps documented and then I'll take another look?

[Baudin999]

@topherfangio Thank you for trying, I will look into this, for now I've just commented out the mongolab code with includes the Promise implementation. This should help. I've tested in on a clean cough windows machine and it worked.

But, the strange thing is that Promise should be in node since at least version 0.12.x it might be that you're running an older version of Node?

Thank you again for trying and if there is anything else I can do let me know!

[topherfangio]

I am running v0.10.26, so apparently I need to upgrade. I'll give that a try, but it may be later tonight or tomorrow.

[Baudin999]

No problem. I can recommend using nvm for node versions. You can swap out a version for another one if you need to run certain applications with certain versions.

[Baudin999]

@topherfangio Anything I can do to help? I still can't find a way to get this to work.

[topherfangio]

@Baudin999 I afraid I can't dig in much more at the moment, but it looks like there might be something a bit wrong with your setup. For instance, I had to add the following to your queryRaces() method to get it to return something viable (otherwise it throws errors in the console):

if (!angular.isString(raceSearchText)) {
   // Don't do anything if we don't have text
  return races;
}

That said, I still couldn't get the autocomplete to work; although, it looks like the latest autocomplete demos aren't working in the codepens for some reason, so I'll look into that. Perhaps it's related.

[Baudin999]

@topherfangio No problem, thank you for looking at the problem.

You are absolutely right that I have some issues with the implementation. It used to work in the Code Pen though so I just copy pasted the code and checked it in. I would rework that once I got the autocomplete working with some server side querying.

I hope the issue will be fixed sometime in the future. Do you want me to keep this issue open? Or should I close it?

[topherfangio]

Since the Codepen is actually broken, let's keep it open so I can track it.

[Baudin999]

@topherfangio I've revisited the problem and after some checking and "messing about" in the source I've found that the function getInputElement of the autocomplete on the following line:

name="{{inputName}}"\

gives the error. When I remove this line everything works fine. The other thing I've noticed is that in the mdItemTemplate I need to use the name for the item which I've given it in the repeat:

<md-autocomplete flex="2"
                 md-items="race in qq.queryRaces(qq.searchText)"
                 md-search-text="qq.searchText"
                 md-item-text="race.name"
                 md-floating-label="Race">
    <md-item-template>
        <span md-highlight-text="qq.searchText">{{ race.name }}</span>
    </md-item-template>
    <md-not-found>
        No matches found for "{{ qq.searchText }}".
    </md-not-found>
</md-autocomplete>

If you want I can continue to dig into the problem?

[topherfangio]

@Baudin999 Do you think you would be able to create a very simple Codepen that reproduces the issue now that you know exactly what it is? That will definitely help me get an exact understanding and be able to find a solution.

Thanks so much for continuing to dig into it!