How to Set Autofocus on Modal Form?

[wktdev]

I have a Modal. It has a dropdown, an input, and a button.

When the modal launches the drop down has focus. I don’t want this, I want the button to have focus so the user can Hit Return and submit if the field already contains the values they want.

I tried placing the vanilla HTML autofocus attribute where I wanted it. It didn’t work. I tried setting the button as type “submit”. It didn’t work.

My code and an image of the Modal is below.

              <div class="modal-container">
                      <.modal id={"delete-modal-#{testbed.id}"}>
                        <!-- Container -->

                  <!-- Login form -->
                        <div class="flex flex-wrap content-center justify-center bg-dark_blue_background text-white">
                          <div class="w-72 mt-10">
                            <!-- Heading -->
                            <small class="text-black-400 text-xl ">
                              You Are Reserving <%= testbed.name %>
                            </small>
                            <!-- Form -->
                            <form
                              class="mt-4"
                              phx-submit="create-status"
                              phx-hook="FormLocalStorageHook"
                              id={"local_storage_hoook-#{testbed.id}"}
                            >
                              <div class="mb-3">
                                <div class="flex justify-center"></div>
                              </div>

                              <div class="mb-3 h-2">
                                <input type="hidden" class="" value={testbed.id} name="testbed_id" />
                              </div>
                              <!--<div class="mb-3">
                          <label class="mb-2 block  font-semibold">Status</label>
                          <input name="status" type="text"  class="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500" />
                        </div> -->
                              <div class="mb-6 ">
                                <p>Status</p>

                                <select
                                  name="status"
                                  id="status-id"
                                  class="rounded mt-2 text-cyan-800"
                                >
                                  <option value="Taken">Taken</option>

                                  <option value="Frozen">Frozen</option>
                                </select>
                              </div>

                              <div class="mb-3">
                                <label class="mb-2 block  font-semibold">Your Name</label>
                                <input 
                              
                                  value={@developer}
                                  name="developer"
                                  type="text"
                                  class="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500"
                                />
                              </div>

                              <div class="mb-3">
                                <.button  class="bg-sky-500/75 mb-1.5 block w-full text-center text-white bg-cyan-700 hover:bg-cyan-900 px-2 py-1.5 rounded-md">
                                  Reserve
                                </.button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <!-- Login banner -->
                      </.modal>

[wktdev]

I tried creating a Hook per the link below. It doesn’t affect the modal.

Phoenix LiveView callbacks - to put text input focus on the selected input field?

The following solution works for me. Create AutoFocus hook in ./assets/js/app.js let Hooks = {} Hooks.AutoFocus = { mounted() { this.el.focus() } } let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...}) Attach it to the first input field of a form <.form let={f} for={@changeset} id="my-form" <%= label f, :name %> <%= text_input f, :name, phx_hook: "AutoFocus" %> ... </.form>

[JohnnyCurran]

What does your modal function component definition look like? I would wager that there is a focus_wrap Phoenix.Component — Phoenix LiveView v0.20.0 on it that’s auto-focusing the first element. You might try removing that and see if it helps

[wktdev]

I see the core modal component and I removed the focus component. It doesn’t seem to fix it. The focus still defaults to the first element. My hook is being recognized.

<input                       
     value={@developer}
     name="developer"
     type="text"
     id={"for_focus_#{testbed.id}"}
     phx-hook = "AutoFocus"
     class="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500"
   />

Hook

        AutoFocus: {
        	mounted(){
        	this.el.focus()
        	  console.log("We are the world. Mounted!")

           }
        }

I also tried putting the Hook on the Form element and selecting the children via the hook. I even tried to “Blur” the first element.

       AutoFocus: {
        	mounted(){
        	this.el.status.blur()
        	this.el.focusitem.focus()
        	  console.log("We are the world. Mounted!")

           }
        }

It doesn’t respond

[wktdev]

I think I know what I need to do. When the Modal launches, I will need to select the field(s) in response to that launched event. Problems is, as it stands, I don’t know how to do that.

[cmo]

Can you add an event to your open modal action that sets the focus?

There is the tabindex html attribute which might help.