Context menu

A context menu and a dropdown menu are the same list of actions. Only the gesture that opens them differs, so the Context Menu renders through the Menu. It accepts every Menu prop and row tag.

The web component opens on contextmenu, which is a right-click or a long press on touch. On a phone you wrap the object in trigger/3 and hold it. A plain tap passes straight through, so the row keeps whatever it did before. A long press works on both iOS and Android.

A long press is invisible unless something points to it, so add a visible control such as a ⋯ button that opens the same menu.

The screen owns open. Open one menu at a time with a test such as open={@open_for == id}. When you set for_label, the menu shows it as a heading above the actions.

The menu opens where you place it: in the layout under the row, or inside a bottom Drawer. It does not open at the pointer.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob context_menu

The generator registers the tag, so you can use it in ~MOB markup. It also generates the Menu that the Context Menu renders through, and the Menu brings its own Popover. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaContextMenu>. Without a prefix, the tag is <ContextMenu>.

Press and hold a row to open its actions, the way the web opens them on right-click. trigger/3 wraps the row. A long press sends {:tap, {tag, id}}, so one clause serves a whole list of rows.

The menu gets for_label so it names the file the actions apply to. Each row also has a ⋯ button that opens the same menu.

Hold a row to open its context menu

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a long press. Hold a row to open its actions.

# trigger/3 wraps the object; holding it fires on_long_press. A plain
# tap passes straight through, so the row keeps whatever it already did.
{MishkaContextMenu.trigger(id, [row_content()], on_hold: :open_for)}

<MishkaContextMenu
  open={@open_for == id}
  for_label={name}
  on_select={:act}
>
  <MishkaMenuItem id={:rename} label="Rename" icon="✎" />
  <MishkaMenuItem id={:delete} label="Delete" icon="🗑" danger={true} />
</MishkaContextMenu>

def handle_info({:tap, {:open_for, id}}, socket) do
  {:noreply, assign(socket, :open_for, id)}
end

Leave out for_label and the Context Menu is exactly a Menu: the actions without a heading. The rows come in as children, either as tags or as a list of nodes like {items} below.

Context menu without a subject

LTR RTL

Preview

Show the whole example Show less

<MishkaContextMenu open={true} on_select={:act}>{items}</MishkaContextMenu>

trigger/3

trigger(id, children, opts) wraps the object the actions belong to. The options are :on_hold, an event tag, and :test_id, a string that becomes the wrapper's native test tag. Holding the wrapper sends {:tap, {tag, id}}.

Two messages reach your screen in handle_info/2. A long press on the trigger sends {:tap, {tag, id}} with the tag you set in on_hold and the id you gave trigger/3. A tap on an enabled row sends {:tap, {tag, item_id}} with the tag you set in on_select.

def handle_info({:tap, {:open_for, id}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open_for, id)}
end

def handle_info({:tap, {:act, action}}, socket) do
  socket =
    socket
    |> Mob.Socket.assign(:last, action)
    |> Mob.Socket.assign(:open_for, nil)

  {:noreply, socket}
end

The Mob Context Menu does not port these parts of the headless Context Menu:

• Placement at the pointer. A touch has no cursor to open at, and a phone has no room for a menu pinned to a coordinate.
• The web component's id and *_class attributes.

• Headless Context Menu, the web component this one ports.
• Mob Menu, the list of actions that the Context Menu renders through.
• Mob Drawer, a bottom sheet that can hold the actions.
• Mob Popover, a panel that floats against its trigger.
• Mob components, the full list of native components.