Tenant | Button and New Form | Need to fix the button click and see error on the form by default #9802

4 Answer(s)

• 

  0

  AI-Bot created 22 days ago

  Support Team ABP Agent

  To address the issues you described on the Tenants page in your ABP Blazor Web App (v9.2.2):

  1. "New Tenant" Button Requires Double Click (First Load)

  This is typically caused by the modal/dialog component not being fully initialized or bound on the first render. In Blazor, modals often require the component to be rendered and the JS interop to be ready before they can open reliably. If the modal is not initialized, the first click may only trigger initialization, and the second click actually opens it.

  Solution:

  • Ensure that the modal/dialog component is initialized on first render.
  • If you are using a custom modal, check that the @ref is set and the modal's JS interop (if any) is initialized in OnAfterRenderAsync.
  • If you use ABP's built-in modal system, make sure you are calling StateHasChanged() after the modal is ready.

  Example for a modal initialization in Blazor:

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          // Initialize modal or JS interop here
          StateHasChanged();
      }
  }
  

  2. Error Messages Show by Default on Form Open

  This usually happens if the form's validation state is set to "touched" or "dirty" before the user interacts with the form. In Blazor, validation messages should only appear after the user attempts to submit the form or interacts with the fields.

  Solution:

  • Ensure that the form's EditContext is not being validated or marked as modified before the user interacts.
  • When opening the modal, create a new EditContext for the form model to reset validation state.
  • Do not call Validate() or set fields as touched on modal open.

  Example:

  private TenantCreateDto NewTenantModel = new();
  private EditContext NewTenantEditContext;
  
  void OpenNewTenantModal()
  {
      NewTenantModel = new TenantCreateDto();
      NewTenantEditContext = new EditContext(NewTenantModel);
      // Open modal here
  }
  

  Bind your form to NewTenantEditContext to ensure a fresh validation state each time.

  3. Error Messages Disappear After Cancel/Close and Reopen

  This is because the form's state is reset when the modal is closed and reopened, which is the correct behavior. The issue is only on the first open due to the initial validation state.

  4. General Recommendations

  • Always create a new model and EditContext when opening a modal for a new entity.
  • Avoid triggering validation on modal open.
  • If using ABP's modal service, ensure you are not passing a pre-validated model.

  ---

  References:

  • ABP Tenant Management Module Documentation

  These steps should resolve both the double-click issue and the premature validation messages on your Tenants page.

  ---

  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

  maliming created 15 days ago

  Support Team Fullstack Developer

  hi

  Is your problem solved?

  Attached is the video for reference

  Where is the video?

  Thanks.

  Save Cancel
• 

  0

  dhill created 9 days ago

  Hi there.

  Yes it's still an issue.

  Here is the video

  https://drive.google.com/file/d/1b7krwYqcBSHcI_ZZumGrWN6hIRk9Evb1/view?usp=drive_link

  Save Cancel
• 

  0

  maliming created 9 days ago

  Support Team Fullstack Developer

  hi

  I can't reproduce it in a new 9.2.2 template project.

  Can you test your case in a new project?

  Or share a minimal project to reproduce it.

  See my video: https://filesupload.io/get/download/n6d2hxtz

  Thanks

  Save Cancel