vaadin/vaadin-dialog

High quality web component for modal dialogs. Part of the Vaadin platform.

<vaadin-dialog>

⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the vaadin/web-components monorepository. This repository contains the source code and releases of <vaadin-dialog> for the Vaadin versions 10 to 19.

<vaadin-dialog> is a Web Component for customized modal dialogs, part of the Vaadin components.

Live Demo ↗ | API documentation ↗

<vaadin-dialog opened>
</vaadin-dialog>

<script>
  const dialog = document.querySelector('vaadin-dialog');
  dialog.renderer = function(root, dialog) {
    root.textContent = 'Sample dialog';
  };
</script>

Installation

The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components are only published on npm, not pushed to GitHub repositories.

Polymer 2 and HTML Imports Compatible Version

Install vaadin-dialog:

bower i vaadin/vaadin-dialog --save

Once installed, import it in your application:

<link rel="import" href="bower_components/vaadin-dialog/vaadin-dialog.html">

Polymer 3 and ES Modules Compatible Version

Install vaadin-dialog:

npm i @vaadin/vaadin-dialog --save

Once installed, import it in your application:

import '@vaadin/vaadin-dialog/vaadin-dialog.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

• The component with the Lumo theme:

  theme/lumo/vaadin-dialog.html

• The component with the Material theme:

  theme/material/vaadin-dialog.html

• Alias for theme/lumo/vaadin-dialog.html:

  vaadin-dialog.html

Running demos and tests in a browser

1. Fork the vaadin-dialog repository and clone it locally.

2. Make sure you have npm and Bower installed.

3. When in the vaadin-dialog directory, run npm install and then bower install to install dependencies.

4. Run npm start, browser will automatically open the component API documentation.

5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

• http://127.0.0.1:3000/components/vaadin-dialog/demo
• http://127.0.0.1:3000/components/vaadin-dialog/test

Running tests from the command line

1. When in the vaadin-dialog directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

vaadin-dialog's Issues

Child elements should not be inside shadow-root

Child elements should not be inside shadow root. This makes e.g. browser's password saving feature not work if login details are entered into fields that are shown inside vaadin-dialog.

Either always have the child elements outside the shadow-root or have a mode where the child elements are outside shadow-root.

Restore focus when dialog closes

... to where it was before opening

Content renderer

Child of vaadin/components-team-tasks#365

See the spec: https://github.com/vaadin/components-team-tasks/issues/365#issuecomment-404149148

Cannot set opened in declarative

This does not work:

 <vaadin-dialog opened></vaadin-dialog>

Hard-coded overlay style with content padding

Currently, vaadin-dialog.html contains hard-coded style with padding for the overlay content:

<dom-module id="vaadin-dialog-styles" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      [part="content"] {
        padding: 5px;
      }
    </style>
  </template>
</dom-module>

This gets combined with theme styles, making the padding hard to customize in the theme.

Sugested fix: rename the style module to vaadin-dialog-overlay-default-theme.

Styles inside the dialog template should be scoped

At the moment, if you place a <style> element in the dialog template, those styles will end up in the global scope in browsers without native shadow dom.

In Firefox, the following will make the body background red when the dialog is opened:

<vaadin-dialog>
  <template>
    <style>
      body {
        background: red !important;
      }
    </style>
  </template>
</vaadin-dialog>

renderer is called twice

Given a component with

      <vaadin-dialog id="editorDialog" no-close-on-outside-click no-close-on-esc></vaadin-dialog>

and

    this.editView = document.createElement("users-edit-view");
    this.editorDialog.renderer = (container) => {
      console.log("Rendering contents of dialog");
      container.appendChild(this.editView);
    };

and some logging statements will produce the following output

15:49:19.311 users-view.js:67 Setting dialog renderer
15:49:20.767 users-view.js:70 Rendering contents of dialog
15:49:20.838 users-edit-view.js:47 users-edit-view ready
15:49:20.838 users-edit-view.js:57 users-edit-view connected
15:49:20.839 users-view.js:70 Rendering contents of dialog
15:49:20.841 users-edit-view.js:52 users-edit-view disconnected
15:49:20.842 users-edit-view.js:57 users-edit-view connected
15:49:20.852 users-view.js:74 Renderer was set

Update styling documentation

The Styling API documentation seems to be outdated (parts for “backdrop” and “content”, but not for “overlay”)

not working with vaadin-grid and context menu.

This following code does not work.

<dom-module id="my-dom">
    <template>
        <style is="custom-style">
            vaadin-grid {
                --vaadin-grid-body-cell: {
                    padding: 0;
                };
            }
            .body-content {
                padding: 8px;
            }
        </style>
            <vaadin-context-menu>
              <template>
                <paper-listbox>
                  <paper-item on-tap="_add">Add</paper-item>
                  <template is="dom-if" if="[[_isGridBody(target)]]">
                    <paper-item content="[[target]]" on-tap="_remove">Remove</paper-item>
                  </template>
                </paper-listbox>
              </template>

              <vaadin-grid id="grid" items="[[items]]">

                <vaadin-grid-column>
                  <template class="header">Name</template>
                  <template>
                    <div class="body-content" data-index$="[[index]]">[[item.name]]</div>
                  </template>
                </vaadin-grid-column>

                <vaadin-grid-column>
                  <template class="header">Surname</template>
                  <template>
                    <div class="body-content" data-index$="[[index]]">[[item.surname]]</div>
                  </template>
                </vaadin-grid-column>

                <vaadin-grid-column>
                  <template class="header">Effort</template>
                  <template>
                    <div class="body-content" data-index$="[[index]]">[[item.effort]]</div>
                  </template>
                </vaadin-grid-column>

              </vaadin-grid>

            </vaadin-context-menu>
                    <vaadin-dialog id="dialog" no-close-on-esc no-close-on-outside-click>
                        <template>
                            <div>Press any button to close</div>
                            <br>
                            <isp-content></isp-content>
                            <vaadin-button on-click="closeDialog">Ok</vaadin-button>
                            <vaadin-button on-click="closeDialog">Cancel</vaadin-button>
                        </template>
                    </vaadin-dialog>
                    <!--paper-dialog id="dialog" modal>
                        <h2>Dialog Title</h2>
                        <p> Hello World</p>
                        <div class="buttons">
                            <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
                        </div>
                    </paper-dialog-->
    </template>
    <script>
        Polymer({
            is: "my-dom",
            properties: {
                items: {
                    type: Array,
                    value: function() {
                        return getItems();
                    }
                }
            },
            ready: function() {
                console.log("my-dom ready");
            },
            _isGridBody: function(target) {
                return target.classList.contains("body-content");
            },
            _add: function() {
                this.unshift('items', getNewItem());
                this.$.dialog.open();
            },
            _remove: function(e) {
                var index = parseInt(e.target.content.getAttribute('data-index'));
                this.splice('items', index, 1);
            },
            closeDialog: function() {
                this.$.dialog.opened = false;
            }
        });
        function getNewItem() {
            function random(arr) {
                return arr[Math.floor(Math.random() * arr.length)];
            }
            var names = ['Artur', 'Patrik', 'Henrik', 'Teemu'];
            var surnames = ['Signell', 'Lehtinen', 'Ahlroos', 'Paul'];
            return {
                name: random(names),
                surname: random(surnames),
                effort: Math.floor(Math.random() * 6)
            };
        }
        function getItems() {
            var items = [];
            for (var i = 0; i < 100; i++) {
                items.push(getNewItem());
            }
            return items;
        }
    </script>
   </dom-module>

I am trying to display a vaadin-dialog on context-menu click(Add option). The dialog appears for the first time. But after that the context menu does not show at all. Same is the case with paper-dialog.

Code examples look convoluted

The examples look bloated/convoluted with long variable names and dom-binds. The benefit of using a dom-bind is really trivial when we are just setting a few event listeners. The examples would IMO look a lot simpler if we just used standard JavaScript.

Use overlay 3.0

• Start from proto/style-gather
• Add a demo on how to style the dialog content

Consider providing a helper element for alerts and confirm

Alerts and Confirms is something that most apps need.
Delivering those helpers components in the dialog repo might facilitate developers using the component.

This is a prototype I did for my crud view:
https://github.com/manolo/crud-view/blob/master/elements/crud-confirm-dialog.html

Npm version of vaadin dialog installs dependencies as "children" instead of as siblings

When installing vaadin dialog with npm, it's creating a child node-modules folder with its dependencies, instead of installing its dependencies as siblings inside node modules like other vaadin elements.

This is a big problem while using it in the same project with vaadin-date-picker because both depend on vaadin-overlay and while testing locally or deploying you end up with this error: Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Here are some images to show what I mean:

This is how other elements install dependencies (in this case vaadin-date-picker)

And this is how vaadin dialog does it

Dialog has native outline on the overlay part

The overlay focus behavior has been changed in vaadin/vaadin-overlay#69
This affected the dialog as the only component using focus-trap, as of now:

I'd suggest fixing this here because of the fact that the overlay is the generic element, and as such it probably shouldn't decide anything about the native outline.

Dialog closes on mouse-up outside the dialog

If you start selecting text inside the dialog and end the drag outside the dialog, the dialog closes unexpectedly. Only happens if the dialog has close-on-outside-click enabled.

Can be reproduced at https://cdn.vaadin.com/vaadin-dialog/1.0.0-alpha1/demo/index.html

Shared styles with vaadin-dialog

Hello,
I tried to use shared style module with vaadin-dialog, but is this supported by vaadin/polymer?

    <vaadin-dialog id="actions-upload" opened="{{uploadDialogOpened}}">
        <template>
            <style include="shared-styles">
             .foo-elem{}
             ...

I tried styling my dialog contents as in example above, and while styles were applied to my element, only things that were inside style tag were present so .foo-elem worked, the styles from shared-styles module were not being applied at all to the contents.

it should not be possible to Tab out of an open modal dialog

When a modal dialog is open it should not be possible to Tab out of it. The tab sequence should remain within the dialog all the time.

See https://www.w3.org/TR/wai-aria-practices/#dialog_modal

Demo page: impossible to close the modal (There's no Esc key on mobile devices)

Consider changing the default behaviour so that the dialog overlay closes on outside click

vaadin-dialog-overlay remains in DOM, later blocking application from working

If you re-open a dialog before it has fully closed, the vaadin-dialog-overlay element remains in the DOM. If you open another dialog with a combo box afterwards, the whole application becomes unresponsive.

Test case: https://next.plnkr.co/edit/648tK1nLy03Q7JQd

1. "Show dialog"
2. "Close and open"
3. "Close"
4. "Show combo box dialog"
5. Select an item in the combo box
6. Try to clear or select another item

closing a dialog should return focus to the originally focused element

Since opening a dialog moves the focus away from the page, closing the dialog should return the focus back to where it was. Currently this is not the case:

Live demo: https://vaadin-dialog.glitch.me/ (source).

See https://www.w3.org/TR/wai-aria-practices/#issue-container-generatedID-7 and https://bitsofco.de/accessible-modal-dialog/#3ondialogclosereturnfocustolastfocusedelement

Support style modules inside the dialog template

In order to have a sensible way to style the dialog contents, we need to support style modules. Without that support, the only way to provide styles for the dialog contents is to make the contents into a Polymer element itself and include style modules there.

The following should be possible:

<link rel="import" href="bower_components/vaadin-lumo-styles/typography.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/color.html">

<vaadin-dialog>
  <template>
    <style include="lumo-typography lumo-color"></style>
    <h2>Dialog title</h2>
    <p>The title and this paragraph should have the correct styles defined by Lumo</p>
  </template>
</vaadin-dialog>

Placing grid with undefined width into dialog is not show.

See: vaadin/vaadin-dialog-flow#67

Either Grid should get room up to a minimum (for fw8 it gets 500x400)
or dialog should have a min and max width.

Follow Vaadin namespace conventions

The JS element name should include the Element suffix and no Vaadin prefix, like all other Vaadin elements:

Vaadin.VaadinDialog -> Vaadin.DialogElement

https://github.com/vaadin/vaadin-dialog/blob/master/vaadin-dialog.html#L174

should not fail when template is not provided

When user does not provide any template, it should not raise any error.

Added wrapper elements should have a way to configure CSS properties

<flow-component-renderer> and its child <div> prevents flex configured in it's container vaadin-dialog-overlay to apply to the dialog content.

We need this workaround, which is an anti-pattern in the theme customisation because the user needs to know implementation details.

https://github.com/vaadin/bakery-app-starter-flow-spring/blob/fix/570-remove-form-dialog/src/main/webapp/frontend/src/styles/shared-styles.html#L60

I don't know what is the best option but some ideas

• Use some javascript to figure-out its parent computed flex styles and apply to flow-component-renderer and div
• Set a default CSS display: flex; flex: auto; that might be valid for most cases
• flow-component-renderer might be themable with a part=content targeting the div wrapper.

[FR]: Provide a way for adding arbitrary content programatically

When using dialogs from server side, it might be useful to have an imperative way for adding content.

In JS could be something like:

const e = document.createElement('div')
e.innerText = 'Click me'
e.addEventListener('click', () => console.log('click'))
dialog.appendChild(e);

In java side it should be quite easy to set content that already is bound to events

MyCElement e = new MyCElement();
e.addEventListener('click', ...);
dialog.getElement().appendChild(e);

Allow adding elements to the dialog by using <slot> instead of <template>

Currently there's no way of adding arbitrary elements inside the dialog - you must instead create a template on how the inner elements should be generated, and then Polymer creates the elements for you.

That's bad for integrations with frameworks that need to manage internal components to provide their features. Also, it makes the usage pretty different from what we have with paper-dialog currently (it uses slots).

Mobile only: not centered properly in the viewport

Consider a way to theme the internal overlay

It would be nice to have different themes for different dialog instances e.g left, right, center.
The problem is that setting theme to the dialog component, there is no way to target the internal overlay.

Having an attribute in the element that is reflected to the overlay like orientation or even theme would be a solution

Fix demos to be touch device friendly

Dialog demos are not touch device friendly, they should be so that tapping outside the dialog would dismiss the dialog unless that has been explicitly disabled (true modal dialog, but then there need to be a way to dismiss the dialog inside the dialog itself)

Make sure the opening/closing can be animated

Do not fail if template is not set

If template is not set, it should not fail. Probably it should show a notice message in console

The very first demo shouldn't need to use Polymer dom-bind

Update the demo to use plain JavaScript

Remove dom-bind from demos

Remove dom-bind from renderer demos

allow setting aria-label / aria-labelledby attributes for screen readers

As a screen reader user I want to hear a short descriptive title of the dialog instead of its entire contents when a dialog opens. As a developer I want to support such users by setting an aria-label or aria-labelledby attribute on the dialog element (the element that has role="dialog"). As of now <vaadin-dialog> does not support setting it.

The 'simple dialog' demo at https://vaadin.com/components/vaadin-dialog/html-examples/dialog-basic-demos shows that:

I would expect that setting an aria-label attribute would affect how screen readers read the dialog. It does not:

<vaadin-dialog aria-label="simple">
  <template>
    <div>This simple dialog will close by pressing the Esc key,</div>
    <div> or by a mouse click anywhere outside the dialog area</div>
  </template>
</vaadin-dialog>

That causes screen readers to read the contents of the dialog twice: once as a title and the second time as the contents:

NVDA:

Dialog: This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area.
This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area.

JAWS:

"This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area" dialog.
This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area.

VoiceOver:

This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area. Dialog.
This simple dialog will close by pressing the Esc key, or by a mouse click anywhere outside the dialog area. Group.

renderer should not be called before dialog is opened

If you create a dialog but it is never shown to the user, the contents is still rendered for no good reason as the renderer function is called immediately when the it is set

Re-enable IE11 tests

Currently just white screen appears in SauceLabs' IE11 browser, no errors in console.

Renderer is triggered too late

See https://next.plnkr.co/edit/y83YprghExBl1ri4 (open chrome inspector to hit the breakpoint)

When you open a dialog, it is initially always shown as empty and only then is the renderer function triggered. If rendering takes some time, you will see the dialog flickering as it is first small and empty and then resized to contain the actual contents.

Tested using

@vaadin/[email protected]
@vaadin/[email protected] 

Optical alignment causes blurriness

The optical alignment fix transform causes blurriness in Chrome and Safari.

With transform:

Without transform:

Reconsider the optical alignment fix (try to find another way to accomplish it, or remove completely).

Focus trap does not work inside shadow-root

When you put an element in the dialog, with focusable elements in its shadow-root those elements are not focusable with keyboard.

You can test it by adding a vaadin-date-picker to a dialog.

A better implementation for focus trap might be not listening to keyboard events, but prevent moving the focus when the dialog is about to blur

Typo in repository description text which is presented on vaadin.com

Repository description text at https://github.com/vaadin/vaadin-dialog/ repeats words 'the Vaadin'.

High quality web component for modal dialogs. Part of the Vaadin the Vaadin platform.

The typo is visible at vaadin.com pages:
https://vaadin.com/components/vaadin-dialog

Tabbing between fields does not work in certain cases

When creating a dialog as

<vaadin-dialog id="editorDialog" no-close-on-outside-click no-close-on-esc></vaadin-dialog>

and

this.editView = document.createElement("my-edit-view");
this.editorDialog.renderer = (container) => {
    container.appendChild(this.editView);
};

Where my-edit-view contains

<h3>Edit user</h3>
<vaadin-form-layout>
    <vaadin-text-field id="firstName" label="First Name"></vaadin-text-field>
    <vaadin-text-field id="lastName" label="Last Name"></vaadin-text-field>
    <vaadin-text-field colspan=2 id="email" label="Email"></vaadin-text-field>
    <vaadin-password-field colspan=2 id="newPassword" label="Password"></vaadin-password-field>
    <vaadin-combo-box colspan=2 id="role" label="Role"></vaadin-combo-box>
</vaadin-form-layout>

I end up with a dialog where tab does not work at all. Whenever you press tab, the focus goes to the overlay element itself.

Ensure Polymer 3 Modulizer compatibility

See “Generic steps” at vaadin/components-team-tasks#326

X to close Dialog

Hi guys,

Is there any built in mark up to lose a dialogs by an x in the top corner?

Fix UX result report

UX test for dialog does not say if/what feedback has been taken into account if any

Should close the overlay on detach

If the dialog is removed from the view, it should close.
This happens when navigating from one view to another in flow.

Flow API related todo list

Polymer.Element APIs leaking to analysis and API docs

• Workaround: class VaadinDialog extends (class extends Polymer.Element {})
• Update analysis.json

Mark with @private for the element classes

• vaadin-dialog.html:
  • class VaadinDialogOverlay

Update demos to prefer renderers

Child of vaadin/components-team-tasks#386

A way to get the element from js

Hello Vaadin team, thx for your component.

In some case we have to access to the element after that it was embedded in the dialog.

I have wrote this method : RoXuS@89093f1

Is there another way ?

Body scrolling should be disabled when dialog is shown