Polymer, Starter Kit 1.3 and paper-dropdown-menu - not functional - windows

0
votes

There are several questions that relate to this issue but none mentions issue I am facing. Before I can ask a question there is a bit of history:

  1. Long story short: stepped on polymer, liked the idea, found its not really for web sites (subfolders not working) and attempting using it in cooperation with nwjs for desktop app. Debugging in firefox, chrome and nwjs - several issues how to setup app for debugging.
  2. As many others after learning about polymer first choice is to get starter.
  3. A full node ordeal follows this one (node, bower, downloading components)
  4. Starter Kit includes some basic source on how to route and how to implement couple of most common operations - segment the application, responsive design, effects
  5. Typically in an app one wants to add some widgets, and one of often used is dropdown-menu.
  6. dropdown example is not provided in starter kit but examples are available in polymer documentation, so one very quickly ends up with the situation like described in: Polymer's paper-dropdown-menu shows uncollapsed

  7. Solution follows - include component handlers (edit to elements.html and include following line:

    <link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">

  8. Often the original design problem resolves, we get dropdown, but in some cases it is half functional, more research follows and you learn you need to add also:

    <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">

So 1st, when I add above lines to elements.html and add typical dropdown to any section. Like:

<paper-dropdown-menulabel="Browser to run?">
  <paper-listbox class="dropdown-content"   attr-for-selected="value" selected="IE" >
    <paper-item value="IE" >Internet Explorer</paper-item>
    <paper-item value="FF">Firefox</paper-item>
    <paper-item value="CRB">Google Chrome</paper-item>
    <paper-item value="PJS">PhantomJS (browsing do not show)</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Voila! It starts singing on Ubuntu Linux with Chromium, Firefox and nwjs. Lets move to windows...

Sorry, windows is no go. Firefox reporting errors in console, chromium has security origin constrains when app is run from the file, nwjs shows everything but refuse to select item, popup opens but no selection is actually made. Then you start thinking is it that some handler shall be placed (but then linux variant works) are events fired (nwjs debugger says yes you can observe them). Yet no selection is made. There was an issue of not closing selection popup by clicking outside of selection popup, one learns to bower update components to resolve issues. Normal learning curve. But apart from explaining of how to design polymer (on polymer doc site) nobody actually documents how to script it so...

Additional questions popup in mind:

  1. I have several dropdowns - how to distinguish and embed/collect data from/to? Use ID's? Use name attribute? Enclosing in iron-form? Best approach?
  2. How to populate dropdowns from the database (web service etc etc) - like this attempt here: Polymer paper-dropdown-menu - is this prefered / intended way of using polymer or it is just personal style?

Main question is:

Is there some workable example which address common issues (like listed above - multiple identifiable dropdowns, populated dynamically) with polymer's paper-dropdown that works cross browser cross platform - which can be quoted and tested?

1
javascriptdrop-down-menupolymer
Have you checked you have the import for paper-item there too? How are you serving the app, using gulp serve? Also, dom-repeat is the easiest way to go for dynamically populating things in polymer – Alan Dávalos
paper-item is already included in the starter kit - I was also trying to reposition it before and after other components but it seems not to make difference. Serving: mainly nwjs (my original intended place for app) or trying from file or trying via chrome server. Will try to serve other ways. – ljgww
dom-repeat - thank you @Alan! will see how to use that – ljgww
Resolved. The bug was me :) Looking at the wrong source of elements.html (working with 2 examples). Now example is working because of right references. But in the same time I have found a bug I can file. – ljgww

1 Answers

0
votes

Resolved. Thanks to everyone who looked at the question.

I have found the bug and the bug is me who was looking at the wrong source (working with 2 different examples and looking at inclusions in other (wrong) elements.html).

Suggested running thru:

polymer serve

or 

polymer serve -p port_number

Helped to debug in the browser rather in NWjs.

However, also, I have found is that if you have exactly 1 element in the dropdown, dropdown would not select once it is selected (or preset with the default)