1
\$\begingroup\$

I have just finished writing this:

https://github.com/mercmobily/hot-autocomplete

This is the source at the time of me writing this post:

https://github.com/mercmobily/hot-autocomplete/blob/2380ed02ee1dd849c78575e69c00b40c18882c93/hot-autocomplete.html

This is one of my first complex-ish Polymer widgets. I was wondering if you could have a look for me.

Questions:

1) I coded the keyboard navigation as best as I could. Focus is tricky. I found it really, really difficult to make sure that when the input field loses the focus, the suggestion bar should disappear. I think there must be better ways of doing it. Do you have any hints on that?

At the moment, I have this in the template:

And then:

  _a11ySubmitInputDown: function( e ){
    this.selectingSuggestion = true;
    if( this._suggestions.length > 1 ){
      this._suggestionsList.focus();
    } else {
      this._hideSuggestions();
    }
  },
  _a11ySubmitEscape: function(){
    this.selectingSuggestion = false;
    this._hideSuggestions();
    this.validateField();
    this._field.inputElement.focus();
  }

Basically, I use this.selectingSuggestions to check whether the box should be displayed or not. Note that this.selectingSuggestions is changed in other parts of the code (for example, when an item gets selected this.selectingSuggestion becomes false. Is this a good way to make things work? Or did I overlook a much easier way to do this?

2) The wrapped element must be the first direct child of hot-autocomplete.

<hot-autocomplete url="/suggest?name={{fieldName1}}" method="get">
  <paper-input value="{{fieldName1}}" required id="name" name="name" label="Your name"></paper-input>
</hot-autocomplete>

The code is basic:

// Sets the form
  this._field = this.getEffectiveChildren()[0];
  this._suggestionsList = this.$.suggestionsList;
},

The template (only a portion)

<!-- The actual content distributed, from the light DOM -->
<content id="contentNode"></content>
<paper-listbox on-iron-select="_selected" id="suggestionsList" hidden>
  <template is="dom-repeat" items="{{_suggestions}}">
    <paper-item>{{item}}</paper-item>
  </template>
</paper-listbox>

The more I think about it, the more I think that a much better Polymer-ish way of doing it would be to require the input field to have a specific ID, and and use that ID to distribute the right content. So MAYBE the template should be:

<content select="#autocomplete" id="contentNode"></content>
<paper-listbox on-iron-select="_selected" id="suggestionsList" hidden>
  <template is="dom-repeat" items="{{_suggestions}}">
    <paper-item>{{item}}</paper-item>
  </template>
</paper-listbox>
<content></content>

Would this be better?

3) Any terrible crime in the code that you can see?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.