MessageInput is not implementing Focusable.

[samie]

Description

This is clearly an oversight from the Java implementation. Similar to TextField the MessageInput should be implementing Focusable.

Expected outcome

messageList.focus(); should work

Minimal reproducible example

MessageInput message = new MessageInput(); message.focus();

Steps to reproduce

Any Vaadin 24 application.

Environment

Vaadin version(s): OS: All

Browsers

No response

[web-padawan]

Note: this would require change in the web component as calling .focus() on vaadin-message-input currently does nothing. The actual focusable element is not the vaadin-message-input itself but the vaadin-text-area inside it.

[samie]

How does the hierarchical focus work? Or how should it work?

There are two focusable elements in this composite component: vaadin-text-area and vaadin-button and optimally it would be good to have programmatic control to focus either of them (as well as the composite).

Of course if the client-side control is not planned/needed, this could be just implemented in the Java API.

[web-padawan]

We also have this problem of two focusable elements in vaadin-date-time-picker and in that case, calling focus() always focuses the date-picker. I think that in this case, it should focus vaadin-text-area. I will create a PR to handle this.

[samie]

In the meantime, this is the workaround that I'm using. I'm not sure why simply focus() does not move the focus ring to vaadin-text-area, and calling _setFocused() is needed.

    /* Implement focus to MessageInput. */
    public static class FocusableMessageInput extends MessageInput implements Focusable<MessageInput> {

        @Override
        public void focus() {
            Element element = this.getElement();
            element.executeJs("setTimeout(function(){var e = $0.querySelector('vaadin-text-area'); e.focus(); e._setFocused();},0)", new Serializable[]{element});
        }
    }