googlearchive / paper-menu Goto Github PK

Hi,

I try to code a component that do a recursive call based on data from table.

With static way it work, but with recursive no.

I have done a plunker

http://plnkr.co/edit/KqR3X5PKfuTKq7oNgTvO

I'm playing around with this example.
https://github.com/PolymerElements/app-layout-templates/blob/master/nav-list-detail/src/x-app.html

I've noticed that when the list is clicked it calls _listTap
on-iron-activate="_listTap"

I modified my function to look like this

_listTap: function(event, target) {
   console.log(target.selected);
}

If I click the first item in the list it prints 1. Wouldn't the intended behavior start counting at 0?

From documentation: "It implements key bindings to navigate through the menu with the up and down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter of a menu item will also focus it."

Neither SPACE nor ENTER activate menu item, same issue with paper-tabs (pressing ENTER does not activate selected tab, although it activates paper-ripple)

Creating a paper-item DOM element and inserting it, creates an item that cannot be selected from the paper-menu.

This is a GIF of the error.

Expected result: The paper-item should work like any other paper-item already in the DOM when starting.

I'm playing around with this example (1.1.0): https://elements.polymer-project.org/elements/paper-menu?view=demo:demo/index.html

In Safari 7.1, with the "Standard" menu, sometimes you need to click twice. If you click in the white area to the right of the word, it moves the gray bar, and also makes the menuitem bold. If you click on a word itself, it moves the gray bar, but doesn't make it bold. You have to click a second time to actually activate it.

Other menu types on that page work the same way. Firefox 40 does not do this: one click is always enough in Firefox.

I don't think this is the same as issue #31, but I'm not sure.

Then I select an item in my outer paper-menu and after that I navigate into my submenu and select an item there, the outer-item is still selected. also conversely:

    <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
      <a data-route="one" href="{{baseUrl}}">
        <iron-icon icon="home"></iron-icon>
        <span>one</span>
      </a>
      <paper-submenu>
        <paper-item class="menu-trigger">two</paper-item>
        <paper-menu class="menu-content">
            <a data-route="two-1" href="{{baseUrl}}two-1">
          <paper-item>
                <iron-icon icon="home"></iron-icon>
                <span>two 1</span>
              </paper-item>
              </a>
          <a data-route="two-2" href="{{baseUrl}}two-2">
          <paper-item> 
                <iron-icon icon="info"></iron-icon>
                <span>two 2</span>
              </paper-item>
              </a>
        </paper-menu>
      </paper-submenu>
      <a data-route="users" href="{{baseUrl}}users">
        <iron-icon icon="info"></iron-icon>
        <span>Users</span>
      </a>

      <a data-route="contact" href="{{baseUrl}}contact">
        <iron-icon icon="mail"></iron-icon>
        <span>Contact</span>
      </a>
    </paper-menu>

Any idea how to fix it?

Hello Polymer team,

See : http://jsbin.com/weqodarine/10/edit?html,output

Expected outcome

We can see the two paper-menu when we click on the two paper-icon-button.

Actual outcome

Only the first paper-menu is displayed correctly.

Steps to reproduce

1. Click on the first paper-icon-button.
2. The first paper-menu is displayed.
3. Click on the second paper-icon-button.
4. The second paper-menu is displayed too low (we can see its).

Where the problem occurred

In iron-list element.

Question

Maybe, I don't use well this feature?

Thx for your attention.

<paper-menu selectable=".item">
  <paper-item class="item" on-tap="open">...</paper-item>
  <iron-collapse>...</iron-collapse>
  ...
<paper-menu>

Each paper-item in my paper-menu opens the iron-collapse below it. Tapping anywhere within the iron-collapse content will focus and scroll to the paper-item above it.

Adding "e.preventDefault()" to on-down events of the iron-collapse elements fixes this for mouse events, but not for touch events. Is there another way to prevent focus and scroll?

The detached function in paper-submenu.html - v1.2.2 is misspelt as dettached. This still appears in master as the time of writing.

Search every bit of documentation but I can't find this:

I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.

When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...

There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

(not sure if I posted this right in paper-menu, maybe it belongs in paper-item?)

Right now is not set so it is inline. Suggest to set display: block on the host.

We're using the menu component here (https://chromedevtools.github.io/debugger-protocol-viewer/) and have a problem:

screenshot w/ devtools open and two troublesome text styles disabled: http://i.imgur.com/bofejWs.png

We can also reproduce on https://elements.polymer-project.org/elements/paper-menu?active=paper-menu&view=demo:demo/index.html

@kdzwinel

"selecting an item styles it and the parent" fails with "Error: expected 'bold' to equal 'normal'"

In the column to the right, contrast on "starred" and "inbox" is not sufficient. Is that supposed to be disabled text?

Windows specific:
Chrome / NVDA: When using the arrow keys to navigate through, I cannot use the arrows to get from the top set of menus to the bottom multi-select menu. I have to press tab to get me to the bottom menu, and in doing so, I am not able to access the "multi-select" text using the screen reader. This seems to be specific to NVDA on Chrome though.

Hello!

Polymer 1.0.5 does not have Polymer.Gestures.findOriginalTarget() that is called from _onParentIronActivate() in paper-submenu.html.

https://github.com/PolymerElements/paper-menu/blob/master/paper-submenu.html#L171

in 0.5 version we can build sub menu with core-menu and core-submenu
Where is Paper-submenu?

Documentation states attrForSelected but only attr-for-selected works.

I've got this element:

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

<dom-module id='test-element'>                                                                                                                                                                                                                                            
  <template>                                                                                                                                                                                                                                                              
    <input id='first'>                                                                                                                                                                                                                                                    
    <input id='second' on-blur='xxx' />                                                                                                                                                                                                                                   
    <input id='third'>                                                                                                                                                                                                                                                    
    <paper-menu id='fourth' on-blur='xxx'>                                                                                                                                                                                                                                
      <paper-item>Item 1</paper-item>                                                                                                                                                                                                                                     
    </paper-menu>                                                                                                                                                                                                                                                         
    <input id='fifth'>                                                                                                                                                                                                                                                    
  </template>                                                                                                                                                                                                                                                             

  <script>                                                                                                                                                                                                                                                                
    Polymer({                                                                                                                                                                                                                                                             
      is: "test-element",                                                                                                                                                                                                                                                 
      properties: {                                                                                                                                                                                                                                                       
        badgesData: {                                                                                                                                                                                                                                                     
          type: Array,                                                                                                                                                                                                                                                    
          value: function(){return [];}                                                                                                                                                                                                                                   
        }                                                                                                                                                                                                                                                                 
      },                                                                                                                                                                                                                                                                  
      xxx: function(evt, obj) {                                                                                                                                                                                                                                           
        console.log('xxx', evt, obj, evt.type, evt.target);                                                                                                                                                                                                               
      },                                                                                                                                                                                                                                                                  
      ready: function() {                                                                                                                                                                                                                                                 
      }                                                                                                                                                                                                                                                                   
    });                                                                                                                                                                                                                                                                   
  </script>                                                                                                                                                                                                                                                               
</dom-module>

Steps:

1. focus on input#first, tab pressed -> nothing
2. focus on input#second, tab pressed -> FocusEvent {isTrusted: true} 0 blur
3. focus on input#third, tab pressed -> FocusEvent {isTrusted: true} 0 blur
4. focus on input#fourth, tab pressed -> nothing

Expected:
3. focus on input#third, tab pressed -> nothing
4. focus on input#fourth, tab pressed -> FocusEvent {isTrusted: true} 0 blur

Neither the selected or the on-iron-activate are triggered until second tap on Firefox.

<paper-menu id="menu" class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-activate="_listTap" >
  <template is="dom-repeat" items="{{subjects}}">
    <paper-item data-route$="{{item.page}}" >
      <iron-icon icon="{{item.icon}}"></iron-icon> <span>{{item.text}}</span>
    </paper-item>
  </template>
</paper-menu>

I think that we can remove the old branches:

• 0.8-behaviors
• 0.8.3-fix
• addMain (already merged)
• drama-llama-breaking-change (already closed)

From @Xeselaro on January 10, 2016 18:2

BUG:
document.querySelector('#submenuelement').toggle() is not a function

Copied from original issue: Polymer/polymer#3283

The background of the previous selection flickers whenever a menu item is selected for the first time. The flicker occurs when the left (or right) mouse button is pressed, before it is released. I can replicate this on the demo page, on Chrome 43, Firefox 38 and IE 11.

In Firefox, I find that I frequently have to double-click paper-items inside a paper-menu if the paper-item has children other than text. The first click activates the element the same way the arrow keys do, but the second click is required to actually select the element.

<paper-menu>
  <paper-item>
    Click me once
  </paper-item>
  <paper-item>
    Click me once also
  </paper-item>
  <paper-item>
    <div>You have to click me twice</div>
  </paper-item>
  <paper-item>
    <div>Me too</div>
  </paper-item>
</paper-menu>

Hello,

I want to deactivate on-tap event management to avoid to toggle menu.

My goal is to have this

and be able to click on buttons without toggle menu.

I search but I don't find a way. I can contribute and send a pull request but before work I want to know if it is not already possible with a method I don't know.

Or in markup. Is it possible? Using the syntax for iron-selector doesn't appear to work.

EDIT: Ah, you can find it by looking at the behavior. Ok, it is documented, but might be helpful to provide an example and a pointer as to where to look?

Currently there's no way to de-select all items once one it selected without using the multi attr.
We should support a toggles property (or similar) so that users don't have to imperatively do this themselves.

At first glance, this appeared to be because it wasn't listed in the bower.json "main" field.

But I tried fixing this locally, and no dice. Not sure if there's something causing problems in paper-submenu docs or what.

This is probably related to PolymerElements/paper-tabs#28

For focus state, we still need concrete specs here. For now, let's try:

• On focus: background color on the menu item shows up
• On selected: text for the menu item is bold

Trying to navigate the menu/submenu demo in the elements catalog results in a really broken keyboard test (usually focus just vanishes from the submenu when you try to navigate with any keyboard keys)

This is a regression from the behaviour of paper-menu in Polymer 0.5 - clicking on a menu item should fire a relevant event (iron-select is fine), but the menu should not remember which item was last selected, because that's completely unintuitive behaviour and flies in the face established menu behaviour.

With the current behaviour, if I have an app menu and I select an item in that menu, the next time I open the menu, that item is still highlighted, and selecting it again has no effect. For a common example where this is clearly broken, consider an overflow menu with a Save As item.

As it is, this is a block for me updating my app to Polymer 1.x, and I'm sure I'm not alone (though it can be hacked around, that shouldn't really be necessary...).

Trying out the demo i get an error in the first two clicks on a multi select, first time i click, selecting one option it shows this:
Uncaught TypeError: focusedItem.setAttribute is not a function
Then when i click second time:
Uncaught TypeError: old.setAttribute is not a function

Items are still selected even after the errors.

The paper-item remains selected after the menu closes. This means a user cannot select the same menu item later in their session. For example, one could imagine a menu with the typical cut/copy/paste menu items. In a word processing application like Google Docs, you'd want to be able to use these menu items multiple times during an editing session.

By default the menu should allow you to select the same menu item multiple times. This is the standard way that menus work in every windowing toolkit. If you want persistent menu item selections (such as with checkbox or radio menu items), then this should be an option, but not the default.

It would be nice to have a way to modify the .selectable-content. As is, I can't add iron-flex-layout to the .selectable-content and instead have to apply it to the items.

I've got many elements in paper-menu, let's say:

<paper-menu>                                                                                                                                                                                                                                                              
  <paper-item>Item 1</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 2</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 3</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 4</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 5</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 6</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 7</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 8</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 9</paper-item>                                                                                                                                                                                                                                         
  <paper-item>Item 10</paper-item>                                                                                                                                                                                                                                        
</paper-menu> 

When paper-menu element has focus, arrow keys (Down, Up) change highlighting on paper-menu but also scrolls whole page.
When I press shift+Up or shift+down, page is not scrolled.
Is this intended?
I would expect Down and Up don't scroll page.

We would like to see a 'noAnimation' (or 'noAnimations') property for the paper-submenu that would disable animation on the iron-collapse (set its 'noAnimation' property).

This would be consistent with 'paper-menu-button' and 'paper-dropdown-menu' noAnimations properties.

Animations are resource hungry, bringing our application to the knees on mobile devices.

I have a paper-menu with a list of paper-items. When I scroll down and then click on a paper-item, the menu (and selection) jumps to the top of the menu to the first element.

I first saw this behavior in Chromium with polymer 0.8-rc.7 and 0.8 elements, but was able to reproduce this separately.

Here is a repro for both 0.8 and 0.9, and some comments related to iron-menu-behavior and iron-selectable.

I didn't see this behavior with polymer 0.5.2 and 0.5.2 elements.

Any help would be appreciated, thanks!

What are the differences between these two elements and when should we use one and not the other?

See this cross-post.

There is no reference in the docs to paper-submenu. As a result you can't find it from the Polymer Element Catalogue.

See screenshot from the docs here: https://elements.polymer-project.org/elements/paper-menu

When creating using paper-menu with paper-submenu children the selected attribute of the paper-menu doesn't account for the paper-items within the paper-submenu.

Expected functionality:
-paper-menu
--- paper-item (selection 0)
--- paper-item (selection 1)
--- paper-submenu
------ paper-item (selection 2)
------ paper-item (selection 3)
--- paper-item (selection 4)

Currently:
-paper-menu
--- paper-item (selection 0)
--- paper-submenu
------ paper-item (selection 1)
------ paper-item (selection 1)
------ paper-item (selection 1)
--- paper-item (selection 2)

The background on focused items is full opacity and the same color as the menu item text. This makes the text unreadable.

The opacity of the background for focused menu items should be lower than the text so the text is readable.

Actual outcome

The opacity is the same as the text so you cannot read the menu item while it is focused.

Steps to reproduce

1. Put a paper-menu element in the page.
2. Open the page in a web browser.
3. Click the paper-menu > a element.

Relates to: Polymer/polymer-starter-kit#515

for every tap in the submenu the selection of the item containing the submenu toggles in the parent menu. what would be a reasonable behavior here anyway?

When clicking an item that is already selected in the paper-menu, the menu doesn't automatically hide itself. In my application the data in the menu changes from time to time. When you open the menu after a data change an item is already highlighted as if selected, and when you click it the paper-menu doesn't hide itself.

you can't programmatically select a submenu. Here's a jsbin showing it: http://jsbin.com/qeyusajohu/1/edit?html,console,output

Should the attrForSelected stuff from IronSelectableBehavior work with paper-menu? It doesn't appear to, see the following jsbin:

http://jsbin.com/yemoxuvili/edit?html,console,output

Hi. I'm not sure whether this an issue of <paper-menu> or <paper-item>, so sorry if I'm raising this in the wrong repository.

In this plunk demonstrate how it's not possible to select a <paper-item>, when it's content is distributed into the Shadow DOM. Clicking a distributed <span> does nothing. It is still possible to select an item by clicking around it, though.

This problem does not occur with Shady DOM (when you comment out the top script).