Fix tabbing between fields not working with mixed_text field

[rute-santos]

Fix keyboard navigation through mixed_text metadata fields; style disabled wizard buttons

Problem

In the wizards (e.g. "Add event"), multi-value mixed_text fields such as
Presenter(s) or Contributor(s) broke keyboard navigation:

• Pressing Tab out of the field left it in edit mode, with the typed text
  held only in local state. The value was never committed, so required fields
  stayed invalid and the Next button stayed disabled with no visible
  reason. This was visible when the next field was also editable.
• Sometimes focus was lost entirely after tabbing out, so the caret went
  nowhere.
• All RenderMultiField instances shared one module-level childRef, so the
  click-outside detection was attached to whichever field rendered last.

Changes

• RenderMultiField.tsx
  • childRef is now created per component with useRef. It is passed to
    EditMultiSelect as containerRef.
  • A new onBlur on the field container checks relatedTarget. When focus
    moves outside the field, the typed value is committed and the field leaves
    edit mode. Clicks are still handled by useClickOutsideField.
  • Leaving edit mode waits for the next tick, so the editor isn't removed
    while the browser is still moving focus to the next field. With
    focus-trap ≥ 8.2, removing it earlier makes the modal's focus trap pull
    focus back to the close button at the top of the modal, skipping the
    remaining fields. The unmount cleanup cancels a pending leave, so a value
    isn't committed twice.
  • submitValue is called through a ref, so callers that run outside the
    current render (the unmount cleanup) use the latest field value. Before,
    they could overwrite values added in the meantime.
  • The remove ("x") buttons stay in the tab order. After a value is removed,
    focus moves back to the input instead of being lost.

How to test

1. Open Add event and go to the metadata step.
2. Click into a multi-value field (e.g. Presenter(s)), type a name, and press
   Tab until focus leaves the field. Focus should move through the "x"
   buttons and then to the next field, not to the top of the modal. The name
   should become a label and the field should close.
3. Tab through the rest of the form. Every editable field after the
   multi-value field should be reached in order.
4. In an open multi-value field, Tab to an "x" button and press Enter.
   The value should be removed and focus should go back to the input.
5. Type a name and press Shift+Tab. The name should be kept and focus
   should move to the previous field.
6. Click inside an open field (input, existing labels). It should stay open.
   Click outside it. It should close and keep the typed value.

AI Usage

🤖 Generated with Claude Code

[github-actions]

This pull request is deployed at test.admin-interface.opencast.org/1685/2026-10-09_16-43-20/ .
It might take a few minutes for it to become available.

[github-actions]

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org 

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

[Arnei]

The remove buttons have tabIndex={-1}, like the remove links in the legacy admin UI. Values can still be removed from the keyboard: pressing Backspace in the empty input removes the last value.

I am against this part. Having important control elements be inaccessible to keyboard controls hurts accessibility. And the proposed alternative is hardly adequate. It seems very unintuitive and poses usability concerns (Want to delete the first element in the list? Welp, you'll have to delete all other elements first).

[rute-santos]

Hi @Arnei I believe I/Claude addressed all your comments. Thanks!

[Arnei]

I wonder if it would simplify the code if we were to combine handleBlur and handleFocusLeaveField into one function? The former is called when the component unmounts, while the latter is called onBlur which coincidentally also results in the component unmounting. So we have two methods doing very similar things at very similar timings here.

[rute-santos]

I (i.e. Claude) made all the requested changes. I hope it's ok now!

[Arnei]

I wonder if it would simplify the code if we were to combine handleBlur and handleFocusLeaveField into one function?

This was not addressed as far as I can tell. Does not necessarily mean there has to be a code-change, an explanatory comment here would be fine too.