Hi,

Expected behavior and actual behavior:

'display-value-changed' event is not emitted and displayValue does not notify

Environment (component version number, Browser (including version), operating system, hardware, etc):

"version": "4.0.16",
operating system: Windows 7,
browser: Chrome Version 62.0.3202.62 (Official Build) (64-bit)

Doesn't implement Polymer.AppLocalizeBehavior for localization

Like other components px-dropdown doesn't support localization showing multi selected values in english 'x selected'

Expected behavior: Should inherit Polymer.AppLocalizeBehavior

Steps to reproduce the problem:

Put the component in a localized app..

As the title suggests, this is a feature request. Since there is no other place I found to include the feature request, I am putting it here, If there is more appropriate place for the same, please guide me there.

1. We are using the px dropdown for displaying countries and states. For some countries, there is huge list of states/counties. Instead of scrolling through the long list of states/counties. it is more intuitive to hit keyboard key to go to that county (e.g. for choosing 'Maharashtra' State in states list of India, one needs to scroll till 'M', instead if user hits key "m" on keyboard, it would scroll down till the first state starts with "m", sounds more intuitive.).
2. Also, if there is any implementation for the tab key, (possible expected behavior is once focus is onto the dropdown, the dropdown list opens and we can move through the list with up and down arrow key)

Expected behavior and actual behavior:

I'm having an issue with the px-dropdown control in multi select mode not refreshing the state of its checkboxes in the UI when the data backing the control is modified by a second control. I have a UI with a dropdown and a basic dom-repeat based list control (with remove buttons for each item) bound to the same array of items. When the bound data is modified by the list control (to set an item's checked property to false), the checkbox in the dropdown does not uncheck.

Specifically:

• When I checked one of the items in the dropdown, the change would be reflected in my list control (which filters based on item.checked == true). Unchecking in the dropdown would cause the item to be removed from my list. So, data binding and change events from dropdown -> list control are working fine.

• When I click the remove button in my list control, the item's checked property is set to false and it disappears from my list control, but the checkbox for that item in the dropdown remains checked.

Some debugger investigation showed that the bound array's data was updated correctly and that the dropdown's items collection also had the right data. We also found that the _itemsChanged function in the dom-repeat template from the dropdown was being called, which suggests that the dom-repeat does know that something changed.

However, for whatever reason the checkbox itself is not refreshed to indicate the data has changed.

Steps to reproduce the problem:

Should be reproduceable simply by adding a px-dropdown bound to an array of data, then adding a button that takes one of those elements and changes it's checked property. I was using dom-repeat's event.model.set to modify the item that was clicked, but even when going against the root's this.set and modifying the item in the array collection itself, the behaviour still occurred.

Environment (component version number, Browser (including version), operating system, hardware, etc):

Found using version 2.2.11 of the px-dropdown component in Chrome 56.0.2924.87 on Windows.

Expected behavior and actual behavior:

Currently Placeholder value is hardcoded to Select word, where as there should be an option to provide place holder value so that it can say something else , e.g ALL, or Product lines etc.

Steps to reproduce the problem:

https://www.predix-ui.com/#/components/px-dropdown/

Environment (component version number, Browser (including version), operating system, hardware, etc):

All

In the demo of px-dropdown at predix-ui.com you are missing checkbox-mode attribute in px-dropdown-content, without which checkboxes are not displayed. It would be nice if you will fix it, I spent a few moments to catch it :)

Thanks

Hello!

Expected behavior and actual behavior:

For some reason, I'm getting null inside of _itemsChanged while trying to initialize the component in an angular application. I got this error while migrating from 2.x to 4.x.

This is the exception I get:

Uncaught TypeError: Cannot read property '0' of null
    at HTMLElement._itemsChanged (px-dropdown.html:446)
    at HTMLElement._observerEffect (polymer.html:1613)
    at HTMLElement._effectEffects (polymer.html:1458)
    at HTMLElement._propertySetter (polymer.html:1442)
    at HTMLElement.__setProperty (polymer.html:1451)
    at HTMLElement._applyConfig (polymer.html:2064)
    at HTMLElement._afterClientsReady (polymer.html:2058)
    at HTMLElement._ready (polymer-mini.html:144)
    at HTMLElement._tryReady (polymer-mini.html:130)
    at HTMLElement._initFeatures (polymer.html:4121)

And this is how I initialize the component:

<px-dropdown id="add-shift-locations-dropdown-data" items='{{vm.locationsToShow}}' multi display-value="Select one or more locations" search-mode></px-dropdown>

And this is what I have in my controller:

vm.locationsToShow = [];

If I replace that line with:

if(items != null && items[0] && typeof items[0] === 'string') {

everything works correctly.

I get as many exceptions as dropdowns I have on the page. It doesn't matter if I have the items initialized to [] or not.

Is there any way to add that null check to the code?

Environment (component version number, Browser (including version), operating system, hardware, etc):

Angular 1.6.6
Bower 1.8.2
px-dropdown 4.0.7 (tried with 4.0.13 too and still not worked)

Support display selected values instead of "n selected" in multiple selection mode

Hi,

Currently px-dropdown component display "n selected" in multiple selection mode

Users have to make one click to view current selected values when px-dropdown is used as an input in a form. It is not good user experience.
Could you please help to support display selected values like this:

The multi-select and iconic dropdown menu items float on the page as you scroll to another section of the demo.

There is a comma missing in bower.json line: 26

Can this be fixed asap. Thanks

HTML:

<px-dropdown> <px-dropdown-text class="px-dropdown-text">Text</px-dropdown-text> <px-dropdown-chevron class="px-dropdown-chevron"></px-dropdown-chevron> <px-dropdown-content class="px-dropdown-content" max-cont-character-width="10" extend-dropdown="true" extend-dropdown-by="15" items={{data}} px-dropdown-click={{downdownHandler()}}> </px-dropdown-content> </px-dropdown>

I see the function being called during the page load. The function is called for each item in the drop down but after the page is loaded the function is not called once an item is selected.

Expected behavior and actual behavior:

We expect to catch the 'dropdown_content_value_changed' event fired from the pxDropdown element, and then retrieve the textValue and key properties from that event. The textValue is being outputted and transferred successfully, however the key always returns back as undefined. Both key and val properties are included in the Object passed to the px-dropdown-content element.

In my page, we have the following instance of pxDropdown:

<px-dropdown id="pxDropdown" display-value="Devices"> <px-dropdown-content class="px-dropdown-content" max-cont-character-width="10" items="{{devices_items}}"> </px-dropdown-content> </px-dropdown>

{{devices_items}} gets altered in one of our methods and gets set to an Object. A sample value passed to it is:

var objectToPass = [{"key":"1", "val":"One"}, {"key":"2", "val":"Two"}];

We included the following listener to catch the event fired by the pxDropdown element whenever the dropdown value changes:

listeners: { 'pxDropdown.dropdown_content_value_changed': 'dropdownValChanged' },

We want to then retrieve the events detail properties: key, and textValue. For our development work, we have this in our 'dropdownValChanged(evt)' method:

console.log("value selected: " + evt.detail.textValue); console.log("key selected: " + evt.detail.key);

The textValue property has the expected value. However the key property comes back as undefined.

Environment

component version number: px-dropdown#0.10.5
Browser: 52.0.2743.116 (64-bit)
operating system: Mac El Capitan v. 10.11.5

px-dropdown is used with different widths across my app, after recent changes all dropdowns appear in default width. When I downgraded version to 4.0.16 everything is fine.

Hi,
I am trying to integrate the px-dropdown component with Angular2.

I am not able to capture the px-dropdown-checkbox-changed and px-dropdown-value-changed events exposed by the component.

I have been able to capture px-dropdown-click.

My html looks like this:

The component that is using this template is:

export class PxDropdownComponent {
title: string = 'Two way binding with Px dropdown';
items: Object[] = [{ "key": "florida", "val": "Florida" }, { "key": "iowa", "val": "Iowa" },
{ "key": "new york", "val": "New York" }];

selectedState: string = '';

constructor() {
PolymerElement('px-dropdown');
}

hello(evt: any){
console.log(evt);
//console.log(event.detail.detail.sourceEvent.currentTarget.childNodes[2]);
}
}

Any clue on why this is not working?

When I first open up the multiselect dropdown menu, it displays all the items:

However, the menu doesn't always retain its height. If I do the following:
1. Type in the search box "windows" (for example)
2. Select "Windows Phone"
3. Unselect it
4. Delete the search
the list menu height shrinks to only display one item with a scroll bar to see the rest:

Multiselect changes selection when the search term is deleted. To reproduce the issue:

1. Type something into the multiselect search box, e.g. "phone"

2. Select one or more items, e.g. "iPhone," "Windows Phone." (Note: make sure you are selecting something other than the first thing in the unfiltered list, in this case iPhone, in order to see the issue)

3. Delete the search term. The selected items will remain highlighted, but the checkboxes will indicate that the first two items are selected.

Submit an Issue

The code I have used to try and set up the dropdown with checkbox-mode and search-mode enabled is attached.

Expected behavior and actual behavior: The dropdown should have options that are checkable and have search bar as the first dropdown option when clicked. It does not have the search option but is checkable.

Environment: Bower v3.1.1, Linux

Steps to reproduce the problem:

I have isolated the issue on the searchBug branch in the file demo/search_bug.html

1. select an item in the dropdown
2. reopen the dropdown and search for something that doesn't exist such as "ec"
3. Bug: the dropdown will unselect what was previously selected
4. Bug: If you then hit 'backspace' or 'delete' the dropdown will close

Expected behavior and actual behavior:

1. select an item in the dropdown
2. reopen the dropdown and search for something that doesn't exist such as "ec"
3. The dropdown would filter to nothing but not unselect the current selection
4. The dropdown should never close when hitting 'backspace' or 'delete'

Environment:

Chrome Beta v60
Safari 9
Firefox 53

side note

I thought there were issues with search when selected was databind too and also when listening to px-dropdown-selection-changed. This is why there are other dropdowns in demo/search_bug.html

Expected behavior and actual behavior:

auto positioning the dropdown on the right is off, it is too much on the right:

Steps to reproduce the problem:

open devtools and pin them to the bottom so they prevent the dropdown from fully opening. Dropdown will be moved to the right, but too far

Environment (component version number, Browser (including version), operating system, hardware, etc):

chrome 59

Expected behavior and actual behavior:

I would expect correct item to be marked as selected when selected item changes and order of item changes

Steps to reproduce the problem:

Fill component with items and set one of them as selected. Change order of items and set other item as selected. Correct item is selected (cannot be selected by click) but it's previous position is highlighted instead of current one (when highlighted item is clicked then it becomes selected one).

Environment (component version number, Browser (including version), operating system, hardware, etc):

component version: 4.0.18;
system: Windows 7;
browser: Version 62.0.3202.75 (Official Build) (64-bit)

<px-dropdown items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows "},{"key":"5","val":"Flip Phone","disabled":true}]' sort-mode="key" button-style="default" display-value="Select" disable-clear></px-dropdown>

works well. but to pass that value as array reference (it is an angular 2 code)

let itemsValue = [{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows "},{"key":"5","val":"Flip Phone","disabled":true}];

<px-dropdown items="{{itemsValue}}" sort-mode="key" button-style="default" display-value="Select" disable-clear></px-dropdown>

is expected to work. But it will give an error "[dom-repeat::dom-repeat]: expected array for items"

on change of drop-down it showing selected value, but when attaching addEventListener for px-dropdown-click not getting selected value. Is there any way to get selected value in AngularJS

I'm using px-dropdown in my angular 4 project and using the below code to listen to selection changes.I'm able to get the selected value but if I use multiple 'px-dropdown' in the same page how can I listen to each separately is the concern.

JS:

document.addEventListener('px-dropdown-selection-changed', function (evt: any) { const selectedData = evt.detail.key; });

HTML:

<px-dropdown id="sensor-selection" items='[{"key":"All Data Sources","val":"All Data Sources"},{"key":"Item1","val":"Box Model"}, {"key":"Item2","val":"Circle Model"},{"key":"Item3","val":"Triangle Model"}]' button-style="tertiary" selected="All Data Sources"></px-dropdown>

If I add another px-dropdown in the same page with different selection criteria it also listens to the same event listener and triggers actions that are related to the previous dropdown and performs functions associated to that.
Please let me know how can I achieve it as I find no difrentiators in px-dropdown-selection-changed events while using multiple px-dropdowns

Hi,

Our team is working with px-ui and we have a requirement to have dropdown with an input search box. The search box helps in filtering items in the dropdown.

Expected behavior:
Have a flag to toggle search box in the dropdown list and use the input in the search to filter the list items.

When one of the options in the dropdown is very long, it gets truncated within the dropdown menu (as it should).

However, if I select that option, the dropdown button takes on the length of that item making the entire menu very long.

Wade said the button should get a max width to fix this.

px-dropdown ui issue: User is not able to search the desired ouput on click of spacebar in px-dropdown search box

Expected behavior and actual behavior:
Expected: When we have a list of values in dropdown list, the user should be able to search the value which has a space(Eg.: "Windows Phone") i.e. when the user enter a space in the dropdown search box, the dropdown list should filter.

Actual: When we have a list of values in dropdown list, the user is not able to search the value which has a space(Eg.: "Windows Phone") i.e. when the user enter a space in the dropdown search box, the dropdown list closes.

Steps to reproduce the problem:

• Open a dropdown which has multiple values
• Try to search a value which has a space(Eg."Windows Phone") in the dropdown search box
• The dropdown box closes

Environment (component version number, Browser (including version), operating system, hardware, etc): Windows 7, Chrome Browser.

When we use,

"Blackberry" is selected in the px-dropdown.
How I get the "key" value "three" of the selected item?

Hi guys,

px-dropdown does not like ng-repeat in AngularJS 1 framework. px-dropdown becomes un-clickable when being wrapped in ng-repeat.

we will appreciate it if you can fix that problem.

Best,
Bailiang

It would be useful to support a "disabled" boolean property for items in px-dropdown-content.

Hi,

I am using px-dropdown component for a multi-select dropdown. To show a multi select dropdown i have used checkbox-mode="true" attribute of px-dropdown component, but i am not able to set or get the value of a multi select dropdown.

I tried document.querySelector('#idofdropdown').selectedKey to get its value but it is not giving any value except the display value that i am setting from my angular code.

Please suggest a solution.

Thank You,
Rajiv K

I have a px-dropdown on my page:
<px-dropdown display-value="abcde"><px-dropdown-content items="{{_defectDropdown}}"></px-dropdown-content></px-dropdown>

With an event listener:
'px-dropdown-value-changed': '_defectSelected'

The px-dropdown-value-changed event does not propagate up however.
I'm using px-dropdown version 2.2.0

Hi,

Our current code is pulling in v4.0.0, but it looks like a PR was merged yesterday that changes the API to remove dependency on px-dropdown-content. Sadly, our code still uses px-dropdown-content, so things are broken :-)

We'll update our code to use the new API, but a major version change might be in order.

Jim

Submit an Issue

Hi,

Thanks for helping us improve the Predix UI platform by submitting an issue.

Before you begin, please check the list of existing issues to avoid submitting a duplicate issue.

To help us solve this issue as fast as possible, please fill out the following sections:

Expected behavior and actual behavior:

Null this.tooltipValue causes error to be thrown

Steps to reproduce the problem:

When using px-data-table with dropdown columns it is possible to assign:

tooltip-message="{{cellValidation.failedValidationErrorMessage}}"

it is possible for this to be null in px-data-table.

However, in general since this is a property anyone could assign it to be null if they aren't careful.

Environment (component version number, Browser (including version), operating system, hardware, etc):

"0.11.5"
Chrome
Windows 7.. laptop

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the CodePen or jsfiddle, templates, which both use polygit, to help explain the issue.

If you need to know please don't hesitate to contact me. I think the issue is fairly straightforward. I would issue pull but I am unclear what the desired handling of this would be. Return false?

The designers have requested the ability to visually differentiate the currently selected item in the dropdown-content box, by highlighting it with a select-blue-default background.

On a similar note, when in multi-select / checkbox mode, users have requested the ability to see something in the dropcell area to indicate that things are selected - need to decide if it should be a comma-separated list of the selected items (with truncation? and tooltip?), or simply a message like "2 selected", or something else.

Hi,

I am rendering the display value of a dropdown from my angular controller. But the tooltip is not showing the value which is showing in display value, instead the tooltip is showing the angular object (enclosed with curly braces like "{{dispval}}") used for display-value attribute.

Please see below code of px-dropdown.

<px-dropdown display-value="{{dispval}}"> <px-dropdown-content style="padding-top:12px;padding-bottom:12px;" extend-dropdown="true" extend-dropdown-by="25" max-cont-character-width="10" items="{{allerptypeDD}}"> </px-dropdown-content style="padding-top:12px;padding-bottom:12px;"> </px-dropdown>

Angular code:
$scope.dispval = "XYZ";

Please suggest how to show the value of tooltip same as display value.

Thank You,
Rajiv

This element does not implement the very basic iron-form-element-behavior therefore it is not able to be seen by screen readers or enable basic required/name/value properties which enable validation upon submit.

The documentation states

First, as a form control, drop-down lists are ideal for a user to choose from a preconfigured list of options

This is not a form control as it does not implement iron-form-element-behavior.

Submit an Issue

Here's a codepen that summarizes the problem well with text and the broken code example: https://codepen.io/davidleonard/pen/boqqXG?editors=1011

Expected behavior:

1. Some items are initially passed into a multi select px-dropdown. The items are marked with "selected" : "true.
2. The items should be selected the dropdown is first opened 👍
3. The dropdown is closed
4. Some new items are passed into the same px-dropdown. The items are marked with "selected": "true".
5. The new items should be selected when the dropdown re-opened 👎

Actual behavior:

1-4 above are still the same. But 5 fails, and nothing is selected when the dropdown is re-opened.

1. When initial items are passed into a multi select px-dropdown, and some items have selected:true properties, the items will be marked as selected when the dropdown is opened

Environment (component version number, Browser (including version), operating system, hardware, etc):

• Chrome 62
• Mac OS X El Capitan

Hmm... 🤔

I think the issue is here: https://github.com/PredixDev/px-dropdown/blob/056043d13f399a6ab8e503796cb597c198e2d3e4/px-dropdown.html#L461

When items are changed, the observer _itemsChanged() is triggered:

https://github.com/PredixDev/px-dropdown/blob/056043d13f399a6ab8e503796cb597c198e2d3e4/px-dropdown.html#L221-L228

And _itemsChanged() calls _updateSelection():

https://github.com/PredixDev/px-dropdown/blob/056043d13f399a6ab8e503796cb597c198e2d3e4/px-dropdown.html#L445-L454

But _updateSelection() only updates the selection if there are no currently selectedValues, which there are. But they're the old ones.

https://github.com/PredixDev/px-dropdown/blob/056043d13f399a6ab8e503796cb597c198e2d3e4/px-dropdown.html#L460-L478

I would pull this out, or just flush the selectedValues at the top of _updateSelection() but I am worried that would have unintended consequences that could break the component for existing customers (e.g. if they update the items, not replace it, should we retain selectedValues).

@randyaskin think you'll know better than I.

px-dropdown does not work when link to web-animations in line 7 is included, when I comment out that line everything works fine. Are there any known solutions to that issue? Thanks in advance for support.

Bug:

The px-dropdown doesn't hide/ move tooltips when you have hovered over a dropdown item, and scroll within the dropdown. The tooltip shows and moves up/down as you scroll while maintaining hover in the dropdown list.

http://codepen.io/sumeet-singh04/pen/XpyJRG

Hi,

I am using this component with search-mode="true" . filter is working properly.

if there is not enough space below dropdown to show an items, options are showing above to the dropcell. But in the same case if i enter value to filter i am facing following issues for dropdown-items as shown below.

Just a question, how do you will handle the bower shutdown and migration? Are you considering switching to npm?

After today's checkins the Demo dropdown (index.html) does not seem to work.

1 Go to http://predixdev.github.io/predix-ui/?show=px-dropdown&type=component
2 Click on "Elephant" dropdown
Expected: Menu opens, left and lower value/tag html indicators change.
Actual: a line appears - a collapsed empty menu? nothing changes.

Expected behavior and actual behavior:

Expected:
When I click on the px-dropdown I should be able to see the dropdown list in the px-dropdown-content just under or above the dropdown(i.e relative to the px-dropdown).

Actual:
When I click on the px-dropdown I am not able to see the dropdown list in the px-dropdown-content just under or above it. The dropdown-content is displayed at a fixed position irrespective if the position of the px-dropdown.
sometimes it is not even visible on the page as it is being displayed out of the page bounds.

Steps to reproduce the problem:

Include the latest px-dropdown with some other form objects like input boxes and dropdowns.
Use predix-layout-design to wrap and arrange the input items.

Environment (component version number, Browser (including version), operating system, hardware, etc):

component version: 2.4.4
Chrome: 53.0.2785.143
OS: OS X El captain

Expected behavior:

It would be very useful to have the ability to have a "Select All" option for the dropdown component when using checkbox or checkbox + search mode. We have use cases where users would like to select a large number of items all at once

Steps to reproduce the problem:

Use the px-dropdown component and set it to checkbox mode

Expected behavior and actual behavior:

The displayed value will changed after I checked one item in checkbox mod

Steps to reproduce the problem:

check/uncheck any item in dropdown menu

Environment (component version number, Browser (including version), operating system, hardware, etc):

Mac OSX 10.11.6
Chrome Version 56.0.2924.87 (64-bit)
Can reproduce on official site https://www.predix-ui.com/#/components/px-dropdown/

Suggest

I read some code and find that: px-dropdown doesn't handle the px-dropdown-checkbox-changed event which is fired by px-dropdown-content, so the displayValue is not changed.

right now we can bind to the "items" array to listen for check changes, woudl be nice if we also fired an event containing:
-the "items" array
-the change (which item and check=true or false)

this needs to be fire in _checkboxChanged in px-dropdown-content

Also make sure we have an event on drodpown closure so people can watch for that rather than listen for individual change.

Document those events.

Expected behavior and actual behavior:

I set the display-value to "Select Sensor(s)" and it was rendered as such, but as soon as a checkbox is selected it reverts displayValue to default of "Select". I would have expected it to remain with the same label I chose and set as the display-value.

Steps to reproduce the problem:

From bower.json:
"px-dropdown": "^3.1.1",

        <px-dropdown display-value="Select Sensor(s)" checkbox-mode="true">
            <px-dropdown-content checkbox-mode='true' extend-dropdown='true' extend-dropdown-by='25'
                    max-cont-character-width='10'
                    items='{{ sensors }}'>
            </px-dropdown-content>
        </px-dropdown>

Environment (component version number, Browser (including version), operating system, hardware, etc):

Chrome.

The code at:

    /**
     * This function updates the checkedItems attribute for the given checkbox:
     * removes it if present and add it if not
     */
    _checkboxChanged: function(checkbox) {
      var itemVal = Polymer.dom(checkbox).parentNode.textContent;

      //make sure we set the checked property properly so listeners are notified
      this.items.forEach(function(item, index) {
        if(item.val === itemVal) {
          this.set('items.' + index + '.checked', checkbox.checked);
          this.fire('item-checked', item);
        }
      }.bind(this));
    },

Takes the textContent of the item, (which should actually be the checkbox value and not the label, but the following example never sets Windows Phone to true, because of the tooltip that is ONLY active for the last element, which is also another bug.

Also the displayValue never updates to the selected items comma separated.

When we open a dropdown, scrollbar in a page does not work.

Steps to reproduce the problem:

dropdown selection/open should not break other functionalities in a page.

Expected behavior and actual behavior:

With multi on, when I clear my selection the check boxes don't uncheck.

Steps to reproduce the problem:

Multi mode

Select some items

Click the 'X' next to 2 selected

Reopen dropdown

click on check box next to Blackberry

Expected Behavior

When I clear the selection by click on the 'X' it should also uncheck the items in the dropdown list.

Environment (component version number, Browser (including version), operating system, hardware, etc):

Chrome 59