Deprecated

This repository has been deprecated. Please find the latest code here: https://github.com/vaadin-component-factory/vcf-autocomplete

<incubator-autocomplete>

Live Demo ↗

<incubator-autocomplete> is a text input with a panel of suggested options.

<incubator-autocomplete> is built with Vaadin Incubator. To use it, you need to have a access to Vaadin Incubator, which is included in Vaadin Prime.

  <incubator-autocomplete id="demo1" label="Choose country" placeholder="Start typing a country name..." options="[[options]]">
  </incubator-autocomplete>

Installation

The Vaadin Incubator components are distributed as Bower packages.

Polymer 2 and HTML Imports compatible version

Install incubator-autocomplete:

bower i vaadin/incubator-autocomplete --save

Once installed, import it in your application:

<link rel="import" href="bower_components/incubator-autocomplete/incubator-autocomplete.html">

Getting Started

Vaadin components use the Lumo theme by default.

The file structure for Vaadin components

src/incubator-autocomplete.html

Unstyled component.
theme/lumo/incubator-autocomplete.html

Component with Lumo theme.
incubator-autocomplete.html

Alias for theme/lumo/incubator-autocomplete.html

Running demos and tests in browser

Fork the incubator-autocomplete repository and clone it locally.
Make sure you have npm installed.
When in the incubator-autocomplete directory, run npm install and then bower install to install dependencies.
Run polymer serve --open, browser will automatically open the component API documentation.
You can also open demo or in-browser tests by adding demo or test to the URL, for example:

Running tests from the command line

When in the incubator-autocomplete directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running gulp lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Contributing

Make sure your code is compliant with our code linters: gulp lint
Check that tests are passing: polymer test
Submit a pull request with detailed title and description
Wait for response from one of Vaadin components team members

License

Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Combined issue list based on review

Browser issues

left padding for items incorrectly applied in shadydom (e.g. Firefox) - better use --_lumo-list-box-item-padding-left for it
position incorrect in IE11 because of not supported window.scrollY, use window.pageYOffset
equivalent instead
event keys do not work in IE11, see workaround

Project structure

any styles using Lumo CSS custom properties should be placed into theme/lumo directory, there is no sense to keep it otherwise with the empty style modules

API

When trying to set options array from JS, the error is thrown:

async.html:34 Uncaught TypeError: Cannot read property 'length' of undefined
    at HTMLElement._getInputtedPart (incubator-autocomplete.html:277)

There should be a complex observer for array splices for options instead of single property observer, to properly handle array mutations:

static get observers() {
  return [
    '_selectedOptionChanged(_selectedOption)',
    '_optionsChange(options, options.splices)'
  ];
}

Small issues

missing imports for some Lumo style modules
missing imports for iron-icon, dom-repeat, dom-if

Opinionated points

hideOptions(event) is invoked both manually and as a click listener, better to use separate methods, and remove confusing event argument from the method invoked manually
inconsistent usage of this.$.textField and this._textFieldElement, either not store the reference in a separate property or use in consistently
inconsistent adding and removal of listeners, you only need connectedCallback and disconnectedCallback to add and remove listeners for document, everything else can be done in ready
demos do not work in IE11 because of arrow functions and startsWith (both are easy to fix)

vaadin / incubator-autocomplete Goto Github PK

incubator-autocomplete's Introduction

Deprecated

<incubator-autocomplete>

Installation

Polymer 2 and HTML Imports compatible version

Getting Started

The file structure for Vaadin components

Running demos and tests in browser

Running tests from the command line

Following the coding style

Contributing

License

incubator-autocomplete's People

Contributors

Stargazers

Watchers

Forkers

incubator-autocomplete's Issues

Browser issues

Project structure

API

Small issues

Opinionated points

Recommend Projects

Recommend Topics

Recommend Org