Disable submitting a text input form with enter

Phoenix Forum Questions / Help
,
1

Hello everyone,

I get the following subcomponent which is a search bar and which works yet if you press enter it seems to submit(?) and it reloads the page and clear the search_query.

I found this Prevent Enter key from submitting Phoenix form - #2 by cenotaph post but adding onkeydown: "return event.key != 'Enter';" to either the form or the input doesnt work. Now its an old post and in the documentation I saw you should use phx-keydown but that seems to be for specific behaviours and not a way to disable it. Other resources I found want to add it in either so Im wondering how I can disable it.

Thanks in advance!

defmodule Subcomponents.SearchBar do
  @moduledoc """
  Search bar
  """
  use CvsWeb, :html

  attr :parent_id, :string, required: true
  attr :search_query, :string, required: true

  def render(assigns) do
    ~H"""
    <form
      class="flex items-center"
      id={"search-bar-#{@parent_id}"}
      phx-change="search"
      phx-target={"##{@parent_id}"}
    >
      <label for="simple-search" class="sr-only">Search</label>
      <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg
            aria-hidden="true"
            class="w-5 h-5 text-gray-500 dark:text-gray-400"
            fill="currentColor"
            viewbox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <% value_text =
          if @search_query in [nil, ""], do: "", else: @search_query %>
        <input
          type="text"
          name="search_query"
          id={"simple-search-#{@parent_id}"}
          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
          placeholder="Zoek op naam"
          value={value_text}
        />
      </div>
    </form>
    """
  end
end
2

I did something similar. Added a phx-hook to my input

But modified, it would look something like this:

Hooks.PreventEnterSubmit = {
  mounted() {
    this.el.addEventListener("keydown", e => {
      if (e.key === "Enter") {
        e.preventDefault()
      }
    })
  }
}