Leptonx angular drap and drop browser window can cause to lose all current work #9759

5 Answer(s)

• 

  0

  AI-Bot created 21 days ago

  Support Team ABP Agent

  This behavior is related to how the LeptonX Angular theme (and many responsive Angular applications) handle viewport changes. When the browser window is resized and crosses the mobile breakpoint, Angular components may be destroyed and re-initialized, causing dialogs and their state to be lost. This is a known limitation of the current LeptonX Angular theme implementation.

  To mitigate this issue, you can:

  1. Use Angular's dialog data persistence:

     • Store unsaved form data in a service or state management (e.g., NgRx, a singleton service) so that if the dialog is destroyed and recreated, the data can be restored.

  2. Prevent dialog destruction on viewport change:

     • This would require a custom implementation or patch to the dialog service/component to persist dialog state across layout changes. There is no built-in ABP or LeptonX setting to prevent this at the moment.

  3. Consider providing user warnings:

     • You can add a guard or warning when the dialog is about to be closed due to a layout change, prompting the user to save their work.

  Currently, there is no official ABP or LeptonX Angular configuration to automatically persist dialog state or prevent this loss of data when switching between desktop and mobile layouts. This is a limitation of the responsive design and Angular's component lifecycle.

  If this is a critical issue for your application, you may consider opening a feature request on the official ABP GitHub repository or implementing a custom dialog state persistence mechanism.

  Sources:

  • Official LeptonX Angular Theme documentation:
    • https://abp.io/en/commercial/latest/themes/lepton-x/angular

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  aZee created 12 days ago

  The autoreply from the bot isn't helping me.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 10 days ago

  Support Team Angular Expert

  Hello, We are sorry for getting back this late. Could you try using this key SUPPRESS_UNSAVED_CHANGES_WARNING to override the default behavior for the touched forms

  // app.module.ts or app.config.ts
  
  providers: [
  	  {
        provide: SUPPRESS_UNSAVED_CHANGES_WARNING,
        useValue: false,
      }
  ]
  

  You can let us know if you need further assistance. Thank you for your cooperation.

  Save Cancel
• 

  0

  aZee created 15 hours ago

  Hello, I have tested the proposed solution using SUPPRESS_UNSAVED_CHANGES_WARNING, but unfortunately it does not resolve the initial issue. From my perspective, the only two possible solutions would be either to avoid the page refresh when LeptonX switches to mobile view (which is the case with Lepton), or to completely disable the mobile view.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 11 hours ago

  Support Team Angular Expert

  From my perspective, the only two possible solutions would be either to avoid the page refresh when LeptonX switches to mobile view (which is the case with Lepton), or to completely disable the mobile view.

  You are right on this matter. However, the transition can be considered normal. Normally, if you suppress this setting, it should work as expected. For more details you can also check this source code https://github.com/abpframework/abp/blob/dd192604ac4da609c997daa4d63a16491999d14d/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts#L40

  Since mobile view switches automatically, you may not directly disable this.

  Save Cancel