thomascybulski / paper-chip Goto Github PK

View Code? Open in Web Editor NEW

32.0 32.0 27.0 325 KB

Polymer 3.x Chips represent complex entities in small blocks, such as a contact.

License: MIT License

HTML 19.83% JavaScript 80.17%

paper-chip's People

Contributors

Stargazers

Watchers

paper-chip's Issues

Error removing chip using `splice()` and `<dom-repeat>`

Description

Error removing chip using splice() and <dom-repeat>.

Expected outcome

When removing A chip, only A chip is removed.

Actual outcome

When removing A chip, somehow both A and B chip are removed.

Steps to reproduce

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Polymer Element Test Case</title>
  <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="bower_components/polymer/polymer-element.html">
  <link rel="import" href="bower_components/paper-chip/paper-chip.html">
</head>
<body>
  
  <h1>paper-chip-remove-problem</h1>
  <!-- Test case HTML goes here -->

  <test-case>
  </test-case>

  <dom-module id="test-case">
    <template>
      Test Case:
      <template is="dom-repeat" items="[[myChip]]">
        <paper-chip
            value$="[[item.value]]"
            label="[[item.label]]"
            on-chip-removed="onChipRemoved"
            closable>
        </paper-chip>
        [[item.value]]([[item.label]])
      </template>
    </template>
  </dom-module>

  <script>
    class TestCase extends Polymer.Element {
      static get is() {
        return 'test-case';
      }

      static get properties() {
        return {
          myChip: {
            type: Array,
            value: function() {
              return [
                {value: 'a', label: 'A'},
                {value: 'b', label: 'B'},
                {value: 'c', label: 'C'},
              ];
            }
          }
        };
      }

      onChipRemoved(e) {
        // console.log('onChipRemoved(e)', e);
        
        let index = e.model.index;
        let item = e.model.item;

        this.splice('myChip', index, 1);
      }
    }
    
    window.customElements.define(TestCase.is, TestCase);
  </script>
</body>
</html>

Create An Autocomplete Example

The demo page sets a property called "sources" but there's no documentation about what sources is supposed to be. Is it a Array<String>? Is it an Array<Object>? How is there a way to let the user lookup values, but store an associated key for the value? For example, if I want to use it to lookup a list user's name and the user object looks something like this {id:1234, firstName:'John', lastName: 'Smith'}, how would the user look this up? How would I get the ID of the selected user? Is there a way to create a custom paper-chip to handle selecting these kinds of objects? Since Polymer now supports ES6 classes, is there a way to have a User class with a toString method that returns the concatenated name that the autocomplete uses?

Polymer 3.0 support

Conflict with all the existing iron icons

When I tried installing it using bower install --save ThomasCybulski/paper-chip, it removed all the iron icons present in my application. Upon uninstallation, it started to display fine.

Styling for chips in input

It would be nice if it were possible to apply styles for individual chips in the input element.

I'm pretty sure it's doable for the paper-chip-input-autocomplete so that chips not selected from the autocomplete list (when additionalItems is true) have different (user defined) styling than the ones from the list (by default they would be the same).

Not sure about the general case but perhaps it is doable using ::slotted() syntax.

Styles Broken on Non-Chrome Browsers

Currently paper-chip looks okay on Chrome, but looks ugly on other browsers:

styled incorrectly ~ seemed unstyled
icon right-aligned (different with Chrome)

I ran the demo from the webcomponents.org:
https://www.webcomponents.org/element/ThomasCybulski/paper-chip/demo/demo/index.html

Here are some screenshots:

Firefox:
Edge:
IE 11:

Could you manage this issue?

Thank you.

<paper-chip-input-autocomplete> in overflow: auto element

I have placed at the end of the element with overflow: auto CSS. Then suggestions were expanded into scroll area (therefore not visible on the tap/write) and were overflowing the parent element instead.

Currently I have no idea how to make them visible. I tried to set --paper-listbox: { position: fixed; width: initial; } but the width is still broken and it is not 100% working solution anyway.

Anybody any suggestions on this?

Add support for readonly

Please add readonly property / attribute for paper-chip-input and paper-chip-input-autocomplete.

paper-chip-input-autocomplete remove item not working correctly

Hi.
First of all thanks for a great element for polymer2. I’m wondering if I’m missing something or is there a bug removing a chip on paper-chip-input-autocomplete.html. I dug in a bit and noticed that on-chip-removed was not called. Traced the issue to the id of the element “slot” where paper-chip sends an event when id == “slot2”. If change this it works.
See:

paper-chip.html
_remove(event) {  if (this.parentNode.id == 'slot2') { …

paper-chip-input-autocomplete.html
<paper-input id="paperInput" label="[[label]]" on-keyup="_findItems" on-keydown="_keydown" value="{{_inputValue}}" autofocus>  <slot id="slot" name="input" slot="prefix">

Thanks.

Question : How to run a JavaScript function on clicking the Cross on `closable` paper-chip

Hi,
I want to execute a DeleteItem() function in JavaScript when my user closes a paper-chip. Is there any defined method for this kind of operation?

Firefox 54 supports this element

I've tested this element with Firefox Version 54, and all basic functionality seems to be available.

Add attribute to indicate whether element has value or not

Add an attribute/property which indicates whether the input is empty or not. Intended usage is in CSS selectors ie

paper-chip-input-autocomplete[has-value] {...}

Unfortunately it seems that the standard :placeholder-shown class is not working with polymer elements (ie even with paper-input).
Vaadin elements do have (at least combo-box and date-picker) hasValue property for this purpose.

Autocomplete could use remote datasource ?

Use case: every query changed, need to regenerate new datasource.

paper-chip-input-autocomplete doesn't work on Safari or Firefox (on Mac)

Tested the demo on MacOS (10.12.) Safari / Firefox (latest versions). Search results are not displayed at all.

Focusing autocomplete list with up/down key

It seems that focusing the autocomplete list with up/down key isn't working.

I tested the demo where the last one is "paper-chip's from autocomplete" - there I typed "al" and autocomplete list pops up, but when pressing up or down key then the caret jumps to the beginning or end of the input rather than selecting item in the autocomplete list.

Tested with
Chromium-browser Version 61.0.3163.79 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
Google-Chrome Version 60.0.3112.78 (Official Build) (64-bit)

Multi-line paper-chip-input spills outside it's container

To reproduce make new "polymer-2-starter-kit" application (with the polymer-cli), open the generated "my-view1.html" add paper-chip-input as the last tag to the <div class="card">. Now open the app in browser and enter several chips to the input until they won't fit onto the single line. The multi line input "spills" over the edge of it's container (see attached picture):

paper-chip-input removes two chips on press of backspace in IE

When moving through the demo in IE. paper-input-autocomplete removes two chips on press of backspace. Also the styles are breaking for the paper-input

The autocomplete results appear to be with wrong width or offset

When I start searching with the paper-chip-input-autocomplete, the paper-list seems to be to wide and goes way beyond the paper-input width.

I would expect the width of the results to match the one from the paper-input blue line.

I think I've fixed the problem by adding in the styles of the paper-chip-input-autocomplete this

:host { display: block; position: relative; }

I'm not sure if it breaks in other scenarios

Allow duplicate entries in paper-chip-input-autocomplete

Add allow-duplicates property for paper-chip-input-autocomplete which when set would allow to have same chip mote than once in the input. This would also mean that acutocomplete list is not filtered and when additional-items is set then same new item can be entered multiple times.

Add chip-added event for paper-chip-input-autocomplete

paper-chip-input-autocomplete fires chip-created when new chip is created (ie user enters label which doesn't exist in source and presses Enter, requires additionalItems to be true) and chip-removed is fired when chip is "closed". But there is no way to detect user selecting an chip from autocomplete list. So please add chip-added (or chip-selected ?) event for that case.

Label Moves To Side When Number of Chips Wraps

When the number of chips in the autocomplete field causes the field to wrap, the label text moves from the top left, to the right. Is there a way to prevent this from happening?

Inconsistency between source and items types

paper-chip-input-autocomplete, currently the source must be an array of objects while items is always array of strings.

It would be nice if the source would also accept an array of strings in which case the items would be strings. If the source is assigned an array of objects then items would also be an array of objects. When the source is objects then additional item-label-path property is used to determine which property of the objects is used for the chip label (defaults to text to preserve current behaviour).

When source is objects but there is also item-value-path property set then the items would contain values of those properties instead of objects.

thomascybulski / paper-chip Goto Github PK

paper-chip's People

Contributors

Stargazers

Watchers

Forkers

paper-chip's Issues

Description

Expected outcome

Actual outcome

Steps to reproduce

Recommend Projects

Recommend Topics

Recommend Org

Jobs