Blazor: Focus the first input when opening a modal

[hikalkan]

For large screens, because it can be problem for mobile devices. It would be good if we can make this automatic out of the box.

[stsrki]

@hikalkan I have several ideas and I would like your opinion.

1. Create <Autofocus> that would wrap an input. In the backend, it would detect screen size or device type and then focus the wrapped input. It would do this only the first time page is loaded

Example

<Autofocus>
  <TextEdit />
</Autofocus>

2. The other solution would be similar in behavior, but I would use existing Form or Validations components with Autofocus parameter. This parameter would say what input needs to be focused on the first load.

Example

<Form Autofocus="@search">
  <TextEdit @ref="search" />
</Form>

[stsrki]

PS. we already have a Focus() method on TextEdit that we can use to set focus programmatically. So we can use that as a first solution. But we still need to detect if it's in mobile device.

[stsrki]

Modals are a little problematic since they are always loaded on the page so we cannot use page-load to focus the input. SO for modals I propose:

3. Add Autofocus parameter, similar to 2nd approach. So whenever modal is activated through the .Show() or Visible="true" I can autofocus the input

<Modal Autofocus="@search">
    <ModalContent>      
        <ModalBody>
            <TextEdit @ref="search" />
        </ModalBody>
    </ModalContent>
</Modal>

[stsrki]

@cotur and @ilkayilknur I would also like your feedback on this if possible

[hikalkan]

Modal Autofocus="@search" and <Form Autofocus="@search"> seems fine to me.

[ilkayilknur]

Is it possible to write something like that?

<TextEdit AutoFocus="true"/>

I also like the first declarative approach. Honestly, I wouldn't say I like giving names to the components and pass them to the other components. This makes code more complicated.

[hikalkan]

I suppose <TextEdit AutoFocus="true"/> is not possible. Otherwise, it would be my first choose :)

[stsrki]

@ilkayilknur <TextEdit AutoFocus="true"/> is the easiest approach, but it would work for pages only. It would not work well once it's placed inside of a modal.

Modal Autofocus="@search" and <Form Autofocus="@search"> makes more sense as that way we cover most of the things.

[stsrki]

🤔 Maybe when I do this <TextEdit AutoFocus="true"/> and I detect TextEdit is placed in modal, it would be automatically detected by the Modal and then focused...

[cotur]

🤔 Maybe when I do this and I detect TextEdit is placed in modal, it would be automatically detected by the Modal and then focused...

This looks like the best way.

[stsrki]

I agree, and I will try and see how it goes.

[stsrki]

I made a quick prototype and <TextEdit Autofocus="true"/> when placed in Modal is working really well. There are some limitations though.

1. Only one component can be marked with Autofocus.
2. I still need to figure out how to autofocus dynamically based on business rules that control which component will be autofocused.