polymerelements / iron-collapse Goto Github PK

I have the following snippet:

<iron-collapse id="input_box">
  <div>
    <paper-material elevation="2">
      Text here
      <paper-input label="Your input"></paper-input>
    </paper-material>
  </div>
</iron-collapse>

Invoking

this.$$('#input_box').show()

briefly animated the input_box to open but it closed immediately after.

But, setting the opened attribute worked perfectly (including the slide down animation)

this.$$('#input_box').opened = true

Enclosing a paper-card element which has its elevation property set to one of {0|1|2|3|4|5} inside of an iron-collapse results in the paper-card element losing its elevation property (effectively, elevation="0")

I tested the same with paper-material and in this case, the elevation was preserved.

Description

The animation transition duration is static.

Expected outcome

The animation transition duration should be configurable.

Actual outcome

The animation transition duration is setted to 300ms.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Maybe it is not a good thing...

If you set the opened attribute to anything, it is interpreted as true.

e.g.,

<iron-collapse id="collapse" opened="false"> inside collapse </iron-collapse>

Still shows the content inside the collapse.

I tried to rebuild the demo in Dart Angular2 and the #collapse2 doesn't resize when #collapse3 is opened.
I could reproduce this in the JS demo when I initially remove the horizontal attribute from #collapse3 and then add it just before I expand it.
This way it has an redundant height: 0px; which breaks the demo.
It seems for the initial default "vertial" dimension the "height: 0px" is added but then when switched to "horizontal" it is not removed.

Looks like when using the element with Angular, the timing is somehow different which results in this behavior.

With VoiceOver / Chrome: When I use the keyboard and screen reader to expand the second item, then my focus goes to the expanded text for the first item. It should logically move to the expanded text for the item I just expanded though. This seems a little confusing for the user. The same thing happens when I expand the third item -- focus shifts back up to the second expanded blurb. Order seems strange. To try this out, enable VoiceOver on Mac by pressing command F5. Then press control + option + right arrow to try to navigate through in logical order.

This does NOT occur on Chrome OS with ChromeVox -- order seems logical with this screen reader / OS / browser combo. I will try this on Windows later this week to see what happens there.

However, as I navigate through with Chrome OS, it just tells me ""collapse button 1"" for example, no matter if it's collapsed or expanded. I think it would be helpful to announce the state -- whether it is collapsed or expanded. Is this possible?

This was originally opened in PolymerElements/paper-radio-button#55, and depends on Polymer/polymer#1773 landing.

TL: DR: If your children change, the size of the iron-collapse should also change

(Copied from Polymer/polymer#1760)

Illustrated by demo: https://elements.polymer-project.org/elements/iron-collapse?view=demo:demo/index.html

Clicking on the content inside core-collapse, or tabbing into it, produces an ugly "focused" outline (on Chrome, a glowing blue outline). In my opinion, this should not be the desired behavior. The element controlling the iron-collapse (e.g., a button) is the one that should be focusable, and the developer is the one that should be responsible for making sure that it is. Making the iron-collapse focusable doesn't achieve anything useful.

The hostAttributes of iron-collapse has tabindex: 0, which is causing this behavior. There's no way to remove the behavior. Even setting tabindex="-1" in the iron-collapse element makes it focusable on click (strange, because it isn't tabbable).

core-collapse in v0.5 does not have this behavior; I'd say this a regression.

P.S. I'd love for this to be my first pull request/contribution to open source on GitHub, if you devs agree with me and would let me. 😃

Description

An empty iron-collapse that gets opened won't show content loaded at a later time.

Expected outcome

iron-collapse should show dynamically loaded content if opened

Actual outcome

iron-collapse does not show anything (max-height: 0px)

Live Demo

https://jsbin.com/jekeyotiko/edit?html,output

Steps to reproduce

1. Put a iron-collapse element in the page, opened with no content.
2. Once the page is loaded, close and open (".toggle()") the empty 'iron-collapse'.
3. Load content into the 'iron-collapse' (".innerHTML =...")
4. The content won't show.

I'm trying to use an animated iron-collapse with a padding-bottom on it, basically on toggle, the animation takes the padding into account and does a strange expand effect, which doesn't occur when noAnimation is set to true

Description

iron-collapse incorrectly sets the aria-expanded attribute.

According to W3C aria-expanded should be set on the "triggering link or button".

iron-collapse is not the trigger link or button but rather the collapsible content itself.

Developers should set aria-expanded on the button that triggers the opening/closing of iron-collapse and it should not be set on iron-collapse itself.

Expected outcome

When navigating into an iron-collapse region the screen reader should not indicate that the region is expanded.

Actual outcome

When navigating into an expanded iron-collapse region the screen reader announces 'Expanded'.

Browsers Affected

I've only tested this on Chrome, but I suspect it applies everywhere a screen reader is used.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

In certain flexbox environments iron-collapse fails to visually collapse itself and to report transitionend events. The flex character suppresses the height changes visually.

Expected outcome

Visually collapsing iron-collapse and fired transitionend events.

Actual outcome

No animation visible, content remains visible, no transitionend events.

Live Demo

Steps to reproduce

See failing test in timove@eec525b

Browsers Affected

Verified for, otherwise untested:

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

The accessibility developer tools audit results are:

"Warning] Text elements should have a reasonable contrast ratio (1)Not applicable tests (14)Passing tests (2)

IMO, the contrast here is totally fine. Black on light grey is fine. 

That said, I am running into some issues with keyboard navigation (without a screen reader on). I can't seem to navigate and collapse / uncollapse the content with just the keyboard. I also don't have a clear visual focus state.

I tested this with VoiceOver on Mac and ChromeVox on Chrome OS. The latter seemed to work fine, but with VoiceOver, I wasn't able to access the uncollapsed text content. We should look into why this might be the case, specifically on this screen reader / browser combo.

Is there a way to make the iron-collapse open from right to left when using horizontal? It seems that it either opens top to down without horizontal, and then left to right with horizontal..

Kind of like putting in a dom-if, but of course we can't do that.

Is this feasible with a templatizer?

On Android with Talkback, right now, I don't have any sense for the state -- collapsed or expanded. When I double tap with Talkback, I just hear ""collapse #1"" each time, whether expanded or not. This context is missing for the user.

Description

Please provide possibility of listening to "opened" and "closed" events

Expected outcome

Event is called when animation is finished

Description

If the page doesn't had enough content that it must scroll than after a toggle of the iron collapse it isn't possible to scroll.

Expected outcome

You can scroll to see all content.

Actual outcome

No Scrolling possible

Live Demo

https://elements.polymer-project.org/elements/iron-collapse?view=demo:demo/index.html&active=iron-collapse

Steps to reproduce

1. Use an iPhone
2. Go to the demo page of the iron-collapse. The content must not use all of the screen (use link above)
3. Toggle the iron-collapse the get all the content. The content must use all of the screen
4. Try to scroll

Browsers Affected

• Chrome
• Firefox
• Safari for iOS
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Could you please restore on-collapse-open event from 0.5 version of this component?
Thank you in advance

Description

Attribute opened is not removed when calling close().

Expected outcome

Attribute opened should be removed when iron-collapse is closed.

Actual outcome

Attribute opened is still set after calling close().

Possible solution

Set reflectToAttribute: true for property opened:

opened: {
  type: Boolean, 
  value: false, 
  notify: true, 
  observer: '_openedChanged',
  reflectToAttribute: true // <-- Add this line
},

iron-collapse has a vertical scrollbar that only displays during its animation.

The effect can be seen here https://elements.polymer-project.org/elements/iron-collapse?view=demo:demo/index.html

Description

paper-menu isn't migrated to polymer 2

Expected outcome

when i type in console
bower install paper-menu#2.0-preview
it should be installed

Actual outcome

bower paper-menu#2.0-preview ENORESTARGET Tag/branch 2.0-preview does not exist
indeed there is no tag

Live Demo

Steps to reproduce

bower install paper-menu#2.0-preview

Browsers Affected

• [ +] Chrome
• [ +] Firefox
• [ +] Safari 9
• [ +] Safari 8
• [ +] Safari 7
• [ +] Edge
• [ +] IE 11
• [ +] IE 10

Description

When I call updateSize("200px", true) on an opened iron-collapse, it will perform the animation to that value but then reset it to the full height.

Expected outcome

The maxHeight should be kept to 200px

Actual outcome

maxHeight is reset to "" at the end of the transition.

Live Demo

http://jsbin.com/wovujur/2/edit?html,output

Steps to reproduce

Click on change size button

Browsers Affected

All

Description

paper-menu-button is invisible.

            <paper-menu-button>
              <paper-icon-button icon="my-icons:face" class="dropdown-trigger"></paper-icon-button>
              <paper-menu class="dropdown-content">
                <paper-item>Share</paper-item>
                <paper-item>Settings</paper-item>
                <paper-item>Help</paper-item>
              </paper-menu>
            </paper-menu-button>

Expected outcome

Should display icon button.

Actual outcome

Nothing is visible

Live Demo

http://jsbin.com/ledisij/edit?html,output

Steps to reproduce

copy example from
https://www.webcomponents.org/element/PolymerElements/paper-menu-button

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

I want to set the overflow to hidden but no customizable property is available

I had this structure:

    <template is="dom-if" if="{{...}}">
      <button on-click="toggle">Text</button>

      <iron-collapse id="myid">
        <div>Test</div>
      </iron-collapse>

    </template>

     ....

      toggle() {
        this.$.myid.toggle();
      }

And when I clicked the button which triggered the toggle function, I noticed that "myid" was not present in this.$. Only after placing the iron-collapse element outside of the if template did this work.

Is this by design?

The following line in iron-collapse.html is causing an error (stated below):

Line 204: iron-collapse.html
this.offsetHeight = this.offsetHeight

Error:
Uncaught TypeError: Cannot set property offsetHeight of #<HTMLElement> which has only a getter

Note that I am running the code through a transpiler because I have es6 code in my project.

Can you fix this?

Hello,
I was trying the demo on https://elements.polymer-project.org/elements/iron-collapse
But the collapse functionality it is not working.

Tried on Mozilla Firefox for Ubuntu canonical - 1.0 / version 37.0

This issue was filed in PolymerElements/iron-list#157

iron-collapse should use iron-resizable and call notifyResize when the open state changes.

The element continues to animate open and closed after calling enableTransition(false).

It looks like _openChanged() internally enables and disables transitions using this same method, and thus any previous enableTransition() setting is clobbered, as it is not persisted anywhere else beyond the transitionDuration style property.

Is there any way to substitute core-resize event if open-changed is not enogh?

Description

Programmatically expanding (show()) a hidden submenu puts it in a buggy state, where opened is true but the CSS height is 0px.

This is due to a bug in the animation code, and therefore only manifests if the submenu has animations turned on (which is the default).

Live Demo

http://jsbin.com/rutakeciri/edit?html,output

Steps to reproduce

1. Click on the button (calls show() on the closed iron-collapse nested under a closed top-level iron-collapse).
2. Click on the top-level iron-collapse.

Expected outcome

The top-level iron-collapse opens and reveals an open nested iron-collapse.

Actual outcome

The top-level iron-collapse opens and reveals an apparently closed nested iron-collapse. (In fact its opened is true but its height is 0.

Clicking on the nested iron-collapse seemingly does nothing (in fact it sets opened to false).

Clicking it again reveals it as expected.

This is due to the way the animation code tries to calculate the target height by setting the desired style and calling getBoundingClientRect. Unfortunately when the element is nested under a hidden parent menu (display: none), gBCR returns 0 as height.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

See #49 for a fix.

Note that I've encountered this issue when using paper-menu (which uses iron-collapse internally).

When compiled/vulcanized, iron-collapse won't animate properly, because these lines gets removed

...
// Force layout to ensure transition will go.
/** @suppress {suspiciousCode} */ this.offsetHeight; 
...

Description

I have a trouble with using component.

Expected outcome

Collapse content should be expanded

Actual outcome

When i click the button its throws a error.

Live Demo

Here is my html template:

 <template is="dom-repeat" items="[[items]]">
         <div class="collapse-container">
             <button on-click="toggle">[[item.content.title]]</button>
             <iron-collapse id="collapse">
                   <div class="collapse-item">
                         [[item.answer]]
                   </div>
              </iron-collapse>
         </div>
 </template>

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

The iron-collapse element doesn't notifyResize() appropriately inside of iron-list.

Expected outcome

Resizing as the animations plays out.

Actual outcome & Live Demo

Here's how it currently behaves: http://jsbin.com/vaqatawale/1/edit?html,output

Steps to reproduce

1. Put a iron-collapse element in the page sourrounded by iron-list element.
2. Make sure the iron-collapse element is animated - doesn't have no-animation attribute set.
3. Open the page in a web browser.
4. Trigger the animation.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10