Prevent paper-dialog from automatically closing

Question

Hello:

I have a paper-dialog element in a page:

<paper-dialog ... id="autom_desc_dialog" autoCloseDisabled> 
    ...
    <paper-button ... id="automatizar" affirmative autofocus disabled></paper-button>
</paper-dialog>

and I have an event listener that handles the paper-button click:

var auto_btn = querySelector('#automatizar');
auto_btn.on["click"].listen((Event e) {
    // Some AJAX stuff
});

What I want is that in some cases, to be able to prevent the dialog from closing, I've tried event.preventDefault(), event.stopImmediatePropagation(), event.stopPropagation() but no success.

Thanks in advance.

Answer 1

You don't need to remove affirmative/dismissive attributes as they are used for layout. Polymer dialog docs are wrong (I've opened a GH issue) the default value for closeSelector is '[dismissive],[affirmative]' and not "", you just need to set closeSelector to "" and it won't close the dialog on clicking the buttons.

Answer 2

You just need to remove the affirmative attribute from the button then you have full control of the behavior.

app-element.dart

import 'package:polymer/polymer.dart';

import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
/**
 * A Polymer app-element element.
 */
@CustomTag('app-element')

class AppElement extends PolymerElement {

  /// Constructor used to create instance of AppElement.
  AppElement.created() : super.created() {
  }

  void openClickHandler(Event e) {
    print(e);
    ($['autom_desc_dialog'] as PaperDialog).opened = true;
  }

  void closeClickHandler(Event e){
    if(true /* some condition */) {
      ($['autom_desc_dialog'] as PaperDialog).opened = false;
    }
  }

}

app_element.html

<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">

<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-dialog id="autom_desc_dialog" autoCloseDisabled>
      <div>paper dialog</div>
      <paper-button id="automatizar" autofocus label="close" on-click="{{closeClickHandler}}"></paper-button>
    </paper-dialog>

    <paper-button id="open" autofocus label="open" on-click="{{openClickHandler}}"></paper-button>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>