0

I am using Paper-dialog and paper-dialog-scrollable webcomponents in Polymer projects. I have some set of input fields (Forms) on paper-dialog (pop-up). By default when opening popup(Dialog) I am focusing input field.

But issue is when i click, scroll anywhere inside the dialog, Input lose it focus. How should i keep focus inside paper-dialog even if i click/scroll

i tried below code but no luck. form code wrote inside another element called my-form-element

   <paper-dialog-scrollable id="myDialog">
        <my-form-element></my-form-element>
   </paper-dialog-scrollable>



Polymer.RenderStatus.afterNextRender( this, function() {
     const dialogContent = this.$.myDialog.$.scrollable;
     dialogContent.addEventListener('click', (e) => {
          e.preventDefault();
      });
 });
Munna Babu
  • 5,496
  • 6
  • 29
  • 44
  • Input lose its focus mean, your dialog is closed when you click out of dialog? and need to re-open or? – Cappittall Nov 08 '18 at 16:40
  • I have FORM(SignUp) inside DIALOG. Dialog has max-height and width and given overflow : auto. problem here is when i click SCROLL. paper-input lose it focus which is inside DIALOG. it should not lose focus on SCROLL. @HakanC – Munna Babu Nov 08 '18 at 17:21
  • try `this.$.myDialog.autofocus = true` Not sure. There are some options more. But if you could provide an online test place like https://stackblitz.com or somehow. Than can test dome options.:) (myDialog , this id may replace with `paper-input 's id` – Cappittall Nov 08 '18 at 17:43

0 Answers0