Add keyboard keys to remove focus on input fields

[dennis531]

Adds a keyboard event handler to remove the focus from input elements when the esc or enter key are pressed. This pull request is based on https://github.com/opencast/opencast-admin-interface/issues/643#issuecomment-2150046215.

Close https://github.com/opencast/opencast-admin-interface/issues/643

[github-actions[bot]]

This pull request is deployed at test.admin-interface.opencast.org/733/2024-06-24_11-06-43/ . It might take a few minutes for it to become available.

[github-actions[bot]]

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 ghcr.io/opencast/opencast-admin-interface:pr-733

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 ghcr.io/opencast/opencast-admin-interface:pr-733

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.

[rlucke]

I don't understand the point of this pull request. There is already a key handler in RenderField.

// Handle key down event and check if pressed key leads to leaving edit mode
    const handleKeyDown = (event: React.KeyboardEvent, type: MetadataField["type"]) => {
        const { key } = event;
        // keys pressable for leaving edit mode
        const keys = ["Escape", "Tab", "Enter"];

        if (type !== "textarea" && keys.indexOf(key) > -1) {
            setEditMode(false);
        }
    };

And you can already use "Escape", "Tab", "Enter" to leave the input field.

[dennis531]

I don't understand the point of this pull request. There is already a key handler in RenderField.

This is true, but it doesn't apply to all field components, as not all of them have a component property. In these cases, a simple HTML input will be used, which does not support Enter and ESC keys (at least in Firefox). For example, in the create user dialog, the RenderField or RenderMutlifield is not passed as component prop.

To avoid redundant code, I created this wrapper that adds this key down handler to all Field components. If a component prop with value such as RenderField is passed, this handler will be ignored in the RenderField component.

[github-actions[bot]]

This pull request has conflicts ☹ Please resolve those so we can review the pull request. Thanks.