Fix tabbing between fields not working with mixed_text field and add style for disabled 'Next' button. - #1685
rute-santos wants to merge 1 commit into
Conversation
…tyle for disabled 'Next' button. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
This pull request is deployed at test.admin-interface.opencast.org/1685/2026-10-02_20-00-38/ . |
|
Use Run test server using develop.opencast.org as backend: Specify a different backend like stable.opencast.org: It may take a few seconds for the interface to spin up. |
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). |
| handleBlur: (refCurrent: string) => void | ||
| handleLeave: (typedValue: string) => void |
There was a problem hiding this comment.
I'd like better naming for these two handlers, to make it more clear which cases they are supposed to cover. Anyone reading this at a glance would likely be confused because they'd assume "blur" and "leave" to be the same thing.
| const typedValue = inputValue; | ||
|
|
||
| // Defer until the browser has finished moving focus; re-rendering | ||
| // mid-transfer would otherwise lose focus entirely. |
There was a problem hiding this comment.
Is this an actual issue, or is Claude Code hallucinating problems into existence that aren't there? The code could be a lot simpler if this is not an actual issue.
There was a problem hiding this comment.
I suspect you are right...
| // Grey out disabled wizard buttons. Must stay after the btn() includes | ||
| // to override their :hover/:focus rules. | ||
| &.inactive, | ||
| &:disabled { | ||
| opacity: 0.5; | ||
| cursor: default; | ||
| } |
There was a problem hiding this comment.
Completely unrelated to the main issue this PR solves, should at least be its own commit
Fix keyboard navigation through
mixed_textmetadata fields; style disabled wizard buttonsProblem
In the wizards (e.g. "Add event"), multi-value
mixed_textfields such asPresenter(s) or Contributor(s) broke keyboard navigation:
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.
next field.
nowhere.
RenderMultiFieldinstances shared one module-levelchildRef, so theclick-outside detection was attached to whichever field rendered last.
Separately, disabled Next/Create buttons looked the same as enabled
ones.
NavigationButtonsalready setsinactive/disabledon them, butnothing styled those states.
Changes
RenderMultiField.tsxchildRefis now created per component withuseRef. It is passed toEditMultiSelectascontainerRef.onBluron the field container checksrelatedTarget. When focusleaves the field, the typed value is committed and the field leaves edit
mode. When focus moves inside the field, the value is committed and the
field stays open. The handler runs on the next tick so it doesn't
re-render while the browser is still moving focus. Clicks are still
handled by
useClickOutsideField.submitValueis called through a ref, so callers that run outside thecurrent render (the unmount cleanup) use the latest field value. Before,
they could overwrite values added in the meantime.
tabIndex={-1}, like the remove links in thelegacy admin UI. Values can still be removed from the keyboard: pressing
Backspace in the empty input removes the last value.
wizardHooks.ts: adds a comment explaining whyuseClickOutsideFielddoesn't handle keyboard exit itself.
_footer.scss: wizard footer buttons with.inactiveor:disabledare shown at 50% opacity with a default cursor.
How to test
become a label, the field should close, and focus should land on the next
field.
"x" buttons.
last value should be removed.
stay open. Click outside it. It should close and keep the typed value.
should look normal again once the field is filled.
AI Usage
🤖 Generated with Claude Code