Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom buttons with HtmlType="submit" logic in ModalFooter

See original GitHub issue

I have been trying for couple of days to get this working without success. Also checked Google and can’t find any solution. I am trying to make a modal window that would have scroller inside content and there would be Header and Footer. I would like to perform validation as well before closing Modal window.

Here is working solution, but buttons are not in Footer and are scrolled with content, that makes them hard to find as they are not attached to the bottom of dialog all the time.

<Modal Title="Create new record"
       Style="width:80%"
       BodyStyle="height:65vh;overflow-y:auto;"
       Visible="@this.isDialogVisible"
       Draggable="@(true)"
       Footer="null"
       OnCancel="(e)=>{this.isDialogVisible = false;}">
  <Form Model="this.RecordModel"
        Layout="@FormLayout.Vertical"
        OnFinish="(e) => this.OnCreateNewDiaryRecord()">
    <div>
      <NewRecord Record=this.RecordModel />
    </div>
    <br />
      <FormItem WrapperColOffset="8" WrapperColSpan="16">
        <Button Type="@ButtonType.Primary" HtmlType="submit">
          Submit
        </Button>
        <Button OnClick="(e)=>{this.isDialogVisible = false;}">Cancel</Button>
      </FormItem>
  </Form>
</Modal>

I have tried this:

@{
  RenderFragment footer = @<Template>
    <Button Type="@ButtonType.Primary" @key="@( "submit" )" HtmlType="submit" Loading="@_loading">
      Submit
    </Button>
    <Button OnClick="(e)=>{this.isDialogVisible = false;}">Cancel</Button>
  </Template>;
}

<Modal Title="Create new record"
       Style="width:80%"
       BodyStyle="height:65vh;overflow-y:auto;"
       Visible="@this.isDialogVisible"
       Draggable="@(true)"
       Footer="@footer"
       OnCancel="(e)=>{this.isDialogVisible = false;}">
  <Form Model="this.RecordModel"
        Layout="@FormLayout.Vertical"
        OnFinish="(e) => this.OnCreateNewRecord()">
    <div>
      <NewRecord Record=this.RecordModel />
    </div>
    <br />
  </Form>
</Modal>

But Submit button does not function in this case correctly = does nothing. However in layout perspective everything looks as expected. So then I have tried this:

<Modal Title="Create new record"
       Style="width:80%"
       BodyStyle="height:65vh;overflow-y:auto;"
       Visible="@this.isDialogVisible"
       Draggable="@(true)"
       OnCancel="(e)=>{this.isDialogVisible = false;}">
  <Form Model="this.RecordModel"
        Layout="@FormLayout.Vertical"
        OnFinish="(e) => this.OnCreateNewDiaryRecord()">
    <div>
      <NewRecord Record=this.RecordModel />
    </div>
    <br />
  </Form>
  <ModalFooter>
    <div>
      <Button Type="@ButtonType.Primary" HtmlType="submit">
        Submit
      </Button>
      <Button OnClick="(e)=>{this.isDialogVisible = false;}">Cancel</Button>
    </div>
  </ModalFooter>
</Modal>

But I am getting exception about ChildContent = no Footer visible. Is there any way to get Custom buttons with Submit logic into Footer?

This is what I am trying to achieve:

Default dialog = modal window with Header, Content and Footer sections
Dialog has fixed Height property (either px or %) and scroller appears automatically in content section if after unhiding items in Panel’s Height of dialog exceeds set value.
OK button changed to OkText="@("Submit")" and has HtmlType="submit" logic

I ended up with this code, but it does not “validate” on Submit button pressed (does not highlight error inputs in Dialog like default HtmlType="submit" does):

<Modal Title="Create new record"
       Style="width:80%"
       BodyStyle="height:65vh;overflow-y:auto;"
       Visible="@this.isDialogVisible"
       Draggable="@(true)"
       OkText="@("Submit")"
       ConfirmLoading="@this.confirmationButtonIsLoading"
       OnOk="this.OnSubmitRecord"
       OnCancel="(e)=>{this.isDialogVisible = false;}">
  <Form Model="this.RecordModel"
        ValidateMode="@FormValidateMode.Rules"
        ValidateOnChange="@validateOnChange"
        Layout="@FormLayout.Vertical"
        OnFinish="(e) => this.OnSubmitRecord()"
        OnFinishFailed="(e)=>{this.isDialogVisible = true;}">
    <div>
      <NewRecord Record=this.RecordModel />
    </div>
    <br />
  </Form>
</Modal>