Blazorise: [Question] Modal default button for ENTER

[WillianGruber]

Hi,
Using material, is there a way to specify a button to trigger on ENTER key in Modal?
I tried the following code:

<Modal @ref="ModalGetKey">
    <ModalBackdrop />
    <ModalContent IsCentered="true" Size="ModalSize.Default">
        <Form>
            <ModalHeader>
                <ModalTitle>@ModalGetKeyTitle</ModalTitle>
                <CloseButton Clicked="@HideModalGetKey" />
            </ModalHeader>
            <ModalBody>
                <Field>
                    <FieldLabel>Number</FieldLabel>
                    <NumericEdit @bind-Value="@ModalGetKeyNumber" />
                </Field>
            </ModalBody>
            <ModalFooter>
                <Button Color="Color.Secondary" Clicked="@HideModalGetKey">Cancel</Button>
                <Button Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="@ModalGetKeySubmit">Continue</Button>
            </ModalFooter>
        </Form>
    </ModalContent>
</Modal>

Documentation (https://blazorise.com/docs/components/modal/) mentions form being available only to Bulma, would it be the reason Submit type doesn't work?

Thank you!

[stsrki]

Hi @WillianGruber

As stated in the documentation the Submit button should be placed inside of <Form> element:

<Modal @ref="ModalGetKey">
    <Form>
        <ModalBackdrop />
        <ModalContent IsCentered="true" Size="ModalSize.Default">
            <Form>
                <ModalHeader>
                    <ModalTitle>@ModalGetKeyTitle</ModalTitle>
                    <CloseButton Clicked="@HideModalGetKey" />
                </ModalHeader>
                <ModalBody>
                    <Field>
                        <FieldLabel>Number</FieldLabel>
                        <NumericEdit @bind-Value="@ModalGetKeyNumber" />
                    </Field>
                </ModalBody>
                <ModalFooter>
                    <Button Color="Color.Secondary" Clicked="@HideModalGetKey">Cancel</Button>
                    <Button Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="@ModalGetKeySubmit">Continue</Button>
                </ModalFooter>
            </Form>
        </ModalContent>
    </Form>
</Modal>

Just tried it and it should also work on your side. Please let me know.

[WillianGruber]

I was using the Form inside the ModalContent.
Tried with Form inside Modal and it didn't work.
Tried your version (with 2 forms for sanity) and it didn't work.
When I type the number and press Enter, nothing happens, I need to press tab-tab-enter, changing focus away from the number field.
Just remembering, I am using material design, thats why I said

Documentation (https://blazorise.com/docs/components/modal/) mentions form being available only to Bulma, would it be the reason Submit type doesn't work?

[stsrki]

I can't believe I didn't see <Form> tag in your example 😅

Anyways, Submit button behavior is not tied to any provider. I just tried it in material also just to make sure and it works just fine.

One thing to keep in mind. You must call ModalGetKey.Hide(); to hide modal. It will not work automatically. I guess that would go in your ModalGetKeySubmit()

[WillianGruber]

I do call Hide on Submit, it works when I click it

[stsrki]

Now I'm really not sure what 's wrong. On my side it works just fine. Can you post full example to reproduce the error?

Edit*: include handler methods also! tnx

[WillianGruber]

Hi, please leave this issue open, I'll get back to this soon.

[stsrki]

@WillianGruber no rush. I'm on a team building till tomorrow.

[WillianGruber]

Hi @stsrki , this is the code:

<Modal @ref="ModalGetKey">
    <ModalBackdrop />
    <ModalContent IsCentered="true" Size="ModalSize.Default">
        <ModalHeader>
            <ModalTitle>@ModalGetKeyTitle</ModalTitle>
            <CloseButton Clicked="@HideModalGetKey" />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Number</FieldLabel>
                <NumericEdit @bind-Value="@ModalGetKeyNumber" />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModalGetKey">Cancel</Button>
            <Button Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="@ModalGetKeySubmit">Continue</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

        protected Modal ModalGetKey { get; set; }
        protected string ModalGetKeyTitle { get; set; } = "Key";
        protected ulong ModalGetKeyNumber { get; set; }

        protected void HideModalGetKey()
        {
            ModalGetKeyNumber = 0;
            ModalGetKey.Hide();
        }

        protected void ModalGetKeySubmit()
        {
            ModalGetKey.Hide();
            //internal logic
            NavigationManager.NavigateTo("/DefaultView");
        }

[stsrki]

Thanks for the code sample. I can reproduce the bug now. It seems the issue is with the numeric keydown where it interfere with the form enter key. I will push this to 0.8.8

[WillianGruber]

Hi @stsrki , seems this isn't working yet... could you reopen the issue?

[stsrki]

I will re-check.

[WillianGruber]

@stsrki it is working. My bad.