The documentation for this event (here) claims that the boolean opened state can be found in event.detail.opened:

Fired when the `core-overlay`'s `opened` property changes.
@event core-overlay-open
@param {Object} detail
@param {Object} detail.opened the opened state

However it's actually placed in event.detail itself (here):

this.fire('core-overlay-open', this.opened);

One of these should be changed to match the other.

The core-overlay seems to assume that it should overlay the entire window. In my application, we want it to only overlay one part of the window (it's essentially split into two parts, each is a different application and the dialog only applies to one of them).

Please consider adding an attribute so that the user can specify the parent element so that the target is 'copied' into that instead of the main body, and it 'grey out' only that element's extent and center the target dialog in that area (vertically and horizontally, of course).

Ref: googlearchive/paper-dialog#57

316c491#diff-7dcd7d7c71a725a967337f190e8f0966R494 added support for closeSelector, but if the click on the element matching the selector explicitly sets opened = false, the this.toggle() call in tapHandler will re-open the dialog.

I have a handsontable (html spreadsheet) which has some items that have a default z-index over 100. When the paper-dialog pops up on the page, those items with the high z-index don't get caught by the backdrop and keep their colors.

Second, if layered="true", dropdown boxes within the paper-dialog are hidden. For example, a google maps places.Autocomplete field. It'd make sense that things embedded within the paper-dialog should be higher than the paper-dialog itself.

There seems to be an issue with closing core overlays when the tab is not focused. The overlay itself is not visible (opacity: 0), but both it and the core-overlay-backdrop still cover the page and prevent page interaction. The problem happens regardless of whether layered is set.

To reproduce, go to the core-overlay demo and open dev tools. In the console, paste:

var overlay = document.querySelector('html /deep/ #overlay');
window.setTimeout(function() { overlay.opened = true; }, 10000);
window.setTimeout(function() { overlay.opened = false; }, 20000);

Then switch tabs. Come back to the tab 20 seconds later and the improperly closed overlay and overlay backdrop block page interaction.

The demo.html doesn't work on IE 11.

core-overlay doesn't enable scrolling when the content overflows.

If showing a paper-toast from a paper-dialog and then calling .opened=false on the dialog before the toast disappears a stack overflow occurs.

This happens in core-overlay:

1. applyFocus if called with this.opened = false;
2. focusOverlay() is called and is calling currentOverlay()
3. currentOverlay returns with the same object being blurred
4. applyFocus is again called ...

I'm using a paper-action-dialog with input fields.
When using the app on mobile, opening the dialog and focusing in an input field brings up the on-screen keyboard, which compresses the dialog while "trying" to keep the original positioning.

It does trigger a resize-event (calling resizeHandler) but I suspect that it fires too early and the resizeHandler gets the wrong dimensions for calculating the new size.

Flipping the phone to landscape and back to portrait properly resizes the core-overlay, though.

JSBin at http://jsbin.com/teragoxibu/2

Opening a dialog with input:

Focus in an input:

Flip phone landscale and back again:

Repro, on iOS (i.e. mobile Safari): Goto http://mycommunity.org and tap the top right add button. Fill it out and tap Send. Note how the overlay changes position and just stays there.

Similar, on Chrome or any browser on desktop itself: the overlay changes position each time it's opened. It seems to move a little lower or higher each time it's opened.

Bug w/ core-overlay or something else? I want to solve this. Thank you!

http://stackoverflow.com/questions/25050882/core-overlay-keeps-changing-positions-each-time-it-opens-on-safari-ios

I'm trying to change the dimensions of an overlay and still keep it centered. The contents can be changed to affect the dimensions, but firing core-overlay-position as the documentation suggests seems to do nothing:

overlay.dispatchEvent(new CustomEvent('core-overlay-position', {target: overlay, sizingTarget: overlay, opened: true}));

And I cannot debug since I can't see a handler for the event in this repository. 😞

When a core-overlay is opened, focus should be moved to the first focusable child within the overlay. This is to prevent screen readers from interacting with background content.

ex: http://accessibility.oit.ncsu.edu/training/aria/modal-window/

When using pointerevents.js every click inside a paper-dialog closes it.
From what I see, the problem is that pointerevents translates the mouseup event to pointerup that is captured by the #document.captureHandler of the overlay but not by the dialog.tapHandler so the close job is not cancelled.
Changing the 'captureEventName' to 'pointerup' and 'tap': 'tapHandler' to 'pointerup': 'tapHandler' in targetListeners fixes the issue, but then when not using pointerevents.js the dialog never closes...

The use case is I want to size a core-dropdown to be as wide as the widest item in the dropdown menu.

When an overlay is open, only controls within that overlay should be focusable. It would be nice if the core-overlay could trap the tab key so users don't have to write their own tab handlers. Also if it provided an escape key listener as a exit, that would be good too.

In depth explanation: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

"Current core-overlay is attempting to focus itself as next! (bug)"

Use case:
I am trying to display a series of queued <paper-toast>s in succession.

I am doing this by listening to the close event of the currently open toast and triggering to the opening of the next toast in the queue.

Problem:
When the last toast in the queue is closed, I see a console warning "Current core-overlay is attempting to focus itself as next! (bug)"

There doesn't appear to be anything wrong outside of the warning appearing; all the toasts appear and disappear as expected.

Workaround:
I can trivially cause the warning to go away by introducing a few hundred ms of delay between the closing of the previous toast and the opening of the next one.
This seems hacky and doesn't appear to achieve anything besides suppressing the console warning.

I am using <paper-toast>s in an AngularDart component.

Example component.dart file:

@Component
class ToastComponent {
  bool _show = false;

  bool get show => _show;
  void set show(bool show) {
    _show = show;

    if (!show) {
      //new Timer(Duration.ZERO, _displayNextNotification); // Causes warning to appear.
      new Timer(new Duration(milliseconds: 300), _displayNextNotification); // No warning.
    }
  }
}

Example component.html file:
<paper-toast text="foobar" opened="{{show}}"></paper-toast>

jsbin: http://jsbin.com/tudiso/1

Click the button a bunch of times and the overlay will keep getting smaller and smaller.

https://dl.dropboxusercontent.com/u/5739705/polymer/broken/index.html
I got reproduces on Chrome and Chrome Canary (Windows).

I think a condition for the broken....

1. There is a element that has animation outside <core-overlay>
2. There is <paper-checkbox> (the element that has animation?) in <core-overlay>
3. <core-overlay> has the attribute layered
4. <core-overlay> has the CSS property transform: none;

This issue can be fixed by changing transform: none; to transform: scale(1); at https://github.com/Polymer/core-transition/blob/master/core-transition-overlay.css#L19

But this issue may be a bug of Chrome...

Launch core-overlay's demo page. Click the button to open the dialog. Then click outside the dialog and it should close the dialog but it didn't.

e.g. close the overlay

I have an animation (CSS)

transform: translateX(0%);
transition: 0.6s;

to 50%

this is for paper menu it will be positioned far away from the element that is clicked on in this case paper menu. It seems to set left top incorrectly.

if I turn the transform off it positions fine.

http://jsbin.com/sebege/1/edit

Is this a known limitation?

It's common to need to resize an overlay based on element size changing.

Right now core-overlay always try to switch focus to target element. There should be an option to not do that. For example, if using core-overlay for alert message it should not be focused.

With the addition of the layered propery, any attempt to style the children (which works without the layered property) wont work..
This also happens with things like core-dialog (which has layered by default).

Eg. the style

      paper-action-dialog {
        width: 40%;
        min-width: 430px;
      }
      paper-action-dialog paper-button {
        font-weight: bold;
      }

      paper-button[affirmative] {
        color: #4285f4;
      }

will not apply if the layered="true", which is the default for paper-action-dialog, when set to false, it styles as it used to.

Also with layered=true, the paper-dropdown layer is below the dialog layer, but it must be layered itself to appear outside the dialog to stop scroll-bars showing.

    <paper-action-dialog id="edit_sensor_dialog" heading="{{dialogSensor.id == null ? 'New' : 'Edit'}} Sensor" transition="paper-transition-center" layered="false">
      <div id="sensor_edit_form" layout vertical>
        <paper-input-decorator  label="Name" floatingLabel>
          <input is="core-input" id="input_sensor_name" floatingLabel value="{{dialogSensor.name}}" required></input>
        </paper-input-decorator>

        <paper-dropdown-menu id="input_sensor_type"  label="Sensor Type" >
          <paper-dropdown class="dropdown" layered>
            <core-menu class="menu" selected="{{dialogSensor.type}}" valueattr="id">
              <template repeat="{{type in sensorTypes}}">
                <paper-item id="{{type.name}}">{{type.caption}}</paper-item>
              </template>
            </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>

      </div>
      <paper-button id="buttonCancel"  dismissive>Cancel</paper-button>
      <paper-button id="buttonOk" affirmative on-tap="{{sensorButtonOkTapped}}">Ok</paper-button>
    </paper-action-dialog>

This is duplicated from the description section:

If no role has been set, it would be useful for the core-overlay to specify a role of dialog. Chrome seems to behave very badly if this role is missing.

On core-overlay in iOS 8, the content in the overlay appears as if it's beneath the overlay (greyed out like the rest of the page).

This is resolved if I set layered but I'm mostly concerned about the different behavior compared to Safari on Mac OS X and Chrome.

jsbin: http://jsbin.com/senetemi/1/edit

In Polymer 0.5.1, if I have more than one dialog with a backdrop open, at least one backdrop gets left behind when the dialogs are closed, and I often (but not always) get a Current core-overlay is attempting to focus itself as next! (bug) error message in the console, on line 506 of core-overlay.html.

Because the backdrop sits on top of everything, this makes it impossible to interact with the UI unless I go into the dev tools and remove the <div class="core-overlay-backdrop"> element(s). If there are multiple such elements, one of them will also have the core-opened class, but not the others.

This is with non-layered overlays, I haven't tried it with layered overlays, so I don't know if that makes a difference.

I updated to the latest core-overlay and polymer, and now I'm getting this error:

TypeError: Polymer.flush is not a function

I have a problem core-overlay + incorrect application code..
But I still think core overlay should handle this case.
under some circumstances tapHandler receive event with element which does not have hasAttribute method
I find the place where it can be fixed https://github.com/Polymer/core-overlay/blob/master/core-overlay.html#L600

When I do something like this http://joxi.ru/bmo6DYWhbJVlry .. error disappear.. in fact getAttribute does not fix an issue.

Here is console.log output http://joxi.ru/Y2LpdeXhNBKz26
it's hard to debug the problem because I do not understand how webcomponents polyfills working. maybe this problem can be addressed to webcomponentsjs

code which produce this error here:

    <div id="inputContentContainer">
        <div id="inputContent" relative on-click="{{open}}" >
           <button on-click="{{open}}"
             id="trigger"
             disabled?="{{disabled}}"
             type="button"
            class="btn btn-default {{ {dropup: $.dropdown.opened} | tokenList }}">
            <span class="caret pull-right"></span>
            {{ $.menu.selectedItem.textContent || prompt }}
          </button>

         <core-dropdown id="dropdown" opened="{{opened}}">
            <core-menu on-core-select="{{close}}"
             id="menu"
             class="list-group"
             notap
             selected="{{value}}"
             selectedClass="active">

             <template if="{{allowBlank}}">
                <core-item class="list-group-item" name="" on-click="{{clear}}">
                  {{prompt}}
               </core-item>
            </template>

            <template repeat="{{option in options}}" bind="{{}}">
               <core-item class="list-group-item"
                 name="{{option.value}}"
                 optionElement="{{option}}"
                 on-click="{{selectItem}}"
                 disabled?="{{option.disabled}}">
                  [[option.text]]
              </core-item>
            </template>
          </core-menu>
       </core-dropdown>
     </div>
    </div>

If you load the page at a screen size with a media query that affects the position, even if you resize the window, the element will not be re-positioned. It would make more sense to me if it always set the position regardless off the CSS, and it's the developer's responsibility to override the style attribute with !important. Thoughts?

Cannot read property 'removeChild' of nul when it was toggled

Hi
I am trying to open a core-dropdown below the trigger element. The doc says that this can be achived via css. But the _shouldPosition is always true so my custom css positioning is overwritten.

I see 2 ways to solve this

1. make _shouldPosition a published property so that the user can indicate that there is custom css.
2. add the ability to core-dropdown and others to open below the trigger element, not just only on top of it (which is a very strange thing to do anyway).

Cheers
Bernd

For example:

<polymer-element name="paidtasks-edit-dialog" attributes="opened errorMessage heading">
  <template>
    <paper-action-dialog id="dialog" heading="{{heading}}">
      <content select="#editor"></content>
        <div class="error-text">{{errorMessage}}</div>
        <paper-button dismissive>cancel</paper-button>
        <paper-button id="saveButton" affirmative>Save</paper-button>
      </paper-action-dialog>
  </template>
</polymer-element>

#editor gets appended to paper-action-dialog so it shows up after .error-text.

The overlay maintains its centered position when closed. An overlay centers if it does not have already set positioning. Therefore, if the window is resized after closing, then the overlay will not be centered when re-opened. To fix this, a centered overlay's position should be reset when it is closed.

I am building a simple web app that involves using a core-overlay to create a post to a news feed. On Mobile (Safari/Chrome on iOS) when I click the + button to add a post the overlay does not have the same design as on desktop and when I try to click on the paper inputs it justs closes the overlay.

The whole process works fine on desktop so Im not sure if it is a mobile browser compatibility issue or something else.

Often time we want to know when core-overlay is completely opened/closed.

I have two templates within my custom element which change each other. And when changing happens, core-overlay stops working. So, in my situation it sets 'opened' property to true and thats it. Nothing happens next.

From @dgrasberger on December 3, 2014 23:12

Using .51 and noticed the problem. Pointed firefox at demo page (https://www.polymer-project.org/components/core-overlay/demo.html -- try it to reproduce the bug) and overlay never opened -- my experience was that overlay would open but not close.

Copied from original issue: Polymer/polymer#993

It wasn't happening before but can't figure out what triggers this error, this is the JS console output:

Uncaught TypeError: Cannot read property 'removeChild' of null
core-overlay.html:458 Polymer.mixin.completeBackdrop
core-overlay.html:424 Polymer.mixin.transitionend
core-overlay.html:689 Polymer.mixin._makeBoundListener.(anonymous function)
utils.js:80 utils.fire
core-transition.html:117 Polymer.complete
core-transition-css.html:205 (anonymous function)
core-transition.html:132 listener

Change this:

457    if (getBackdrops().length === 0) {
458      this.scrim.parentNode.removeChild(this.scrim);
459    }

to:

457    if (getBackdrops().length === 0 && this.scrim.parentNode) {
458      this.scrim.parentNode.removeChild(this.scrim);
459    }

solves the problem, may not be the best solution, but it works.

Using TAB keys, I can highlight a "close" button, or link for example in an overlay, bind a key event to any elements that contain this attribute, so I can hit enter on that element to close the overlay.

Similar to ESC ( which is easier by the way ) but it's a missing action that is useful.

e.g.

< core-overlay >
< button core-overlay-toggle >close< /button > <-- auto bind enter key event to this element
< /core-overlay >