Catalog Keyboard

<.nav>

ConnieUI.Keyboard

Feature Film — "Northern Lights"
Carlsberg — Summer Campaign
Documentary — "The Sound"
HEEx 
<div class="w-lg">
  <ConnieUI.Keyboard.nav id="catalog-keyboard-nav">
    <ConnieUI.Layouts.vstack gap="sm">
      <ConnieUI.Forms.search field={@form[:search]} placeholder="Search projects" tabindex="-1" />
      <ConnieUI.Tables.table
        id="catalog-keyboard-nav-projects"
        rows={@projects}
        row_id={& &1.id}
        row_click={&JS.push("select_project", value: %{id: &1.id})}
        size="sm"
        fixed
        scroll={false}
      >
        <:col :let={project}>
          <ConnieUI.Cells.text>{project.name}</ConnieUI.Cells.text>
        </:col>
      </ConnieUI.Tables.table>
    </ConnieUI.Layouts.vstack>
  </ConnieUI.Keyboard.nav>
</div>

Controls

:string
:string

ID of element to focus on mount

Docs

A list stepped through with the keyboard: the arrow keys move between the items (the descendants with `tabindex="-1"`), Home and End jump to the ends, Enter clicks the focused item's `phx-click`, and typing a character moves to the first input among them. On mount it focuses the item whose id is `focus`, or else the list itself, unless the list holds an input.
Attribute Type Default Description
id * :string
focus :string nil
ID of element to focus on mount
Slot Slot attributes Description
inner_block *