Implement optional "Focus follows cursor" pattern

[Kadmioo]

As games often require UIs capable of quickly adapting between cursor and keyboard/controller inputs, many games, such as Elden Ring or Sea of Thieves, have implemented the "focus follows cursor" UX pattern, that enables UI elements to grab focus simply by hovering over them with the cursor. This allows for cleaner and simpler UIs, by removing the need of using two different "hover" and "focus" states, and also allows cursor and keyboard/controller input to be switched seamlessly.

As of now, Godot requires creating a custom script that extends control nodes to implement this feature properly, but it would require setting the same script for many nodes. Implementing it as an optional feature that can be controlled through a property of Control nodes would be a lot more straightforward. For example, each Control node could have a boolean property called "focus_on_hover" set to false by default. Or, it could have an Enum with three states:
Disabled - Focus does not follow the cursor
MouseEntered - Focus is grabbed only if the cursor enters the control
MouseHoveringAndMoved - Focus is grabbed any time the cursor is on a control and it is moved (This is the default behaviour as far as I'm aware)

Solving this with a plugin is possible, but as I've already said, it requires assigning the script to every control that requires it, which can become a bit cumbersome.

EDIT: Replies below have reminded me that I should also mention that implementing this feature with a script can become a bit tricky, since a focused and hovered on control will display its hover style, instead of the focus one. A proper implementation requires the focus style displayed even when the control is being hovered on.

[TheDuriel]

func _gui_input(event) -> void:
    if get_rect().has_point(get_local_mouse_position()):
        grab_focus()

I don't consider this cumbersome at all. Because you will be applying a script to any control with behavior already. Or, will be using custom types already. (Adding SFX to buttons, etc.)

You can also, do this globally, by subscribing to SceneTree.node_added and subscribing to the gui_input of ALL relevant control nodes.

[TheDuriel]

which is the fact that the "hover" state is displayed instead of the "focus" state

This is not exactly how it works. Godot has styles for hover, focus, and focus and hover, which you must make use of via themes for the desired look.

The implementation you are proposing wouldn't have any effect on this.

Theme overrides aren't limiting anything. And the underlying state enum is already exposed to handle this yourself if required.

[Kadmioo]

Could you point out to me the exact name of such "focus and hover" property? As far as I am aware, there are only hover and pressed properties

[sockeye-d]

Godot actually mostly maintains a separate focus stylebox that gets drawn as an overlay on top of the control.

[sockeye-d]

Also, you can make that script a component that you add as a child of all your focus-on-hover GUI nodes

class_name FocusOnHover extends Node

func _ready() -> void:
    var parent = get_parent() as Control
    if parent:
        parent.gui_input.connect(func(e: InputEvent): if get_rect().has_point(): grab_focus())

[Kadmioo]

Godot actually mostly maintains a separate focus stylebox that gets drawn as an overlay on top of the control.

Yes, and this means that the user is limited to using the styleboxes to display a focus state, without being able to style the colors of a button's icon and font.

The workaround I mentioned before using theme overrides consists of something like this:

extends Button

func _ready():
    # Connect focus signals
    connect("focus_entered", self, "_on_focus_entered")
    connect("focus_exited", self, "_on_focus_exited")

func _input(event):
    # Only respond to mouse motion events
    if event is InputEventMouseMotion:
        if is_hovered():
            grab_focus()
            _override_hover_color()

func _on_focus_entered():
    _override_hover_color()

func _on_focus_exited():
    _remove_hover_color_override()

func _override_hover_color():
    # Override the hover font color with the focus font color
    var focus_color = get_theme_color("font_focus_color")
    add_theme_color_override("font_hover_color", focus_color)

func _remove_hover_color_override():
    # Remove the override so the default hover color is restored
    remove_theme_color_override("font_hover_color")

As I've said before, the limitation of this solution is that we are leveraging theme overrides, so their usage can become limited.

Given the popularity of the "Focus follows Cursor" pattern, I believe we should have the option to implement this feature without having to sacrifice another