FocusTracker unable to track few widgets added to shell

#1

When I add widgets to the shell, FocusTracker is unable to detect when a widget is activated.

When I click on a file in the file navigator tree, the corresponding file is opened in the center area. This tab seems to be trackable by the FocusTracker and it is able to receive the 'focus' event.

But, when the Output tab is added to the bottom panel, the following message is seen in the console:
WARN Widget was activated, but did not accept focus: outputView. I hope it indicates that the FocusTracker won’t be able to receive the 'focus' event from Output tab.
As expected, it doesnt track the activated state of the “Output” tab in the bottom panel.

Similarly, I have added few widgets that holds just iFrame to show web contents. These widgets are added to center and bottom areas of shell. These too aren’t trackable by FocusTracker and the 'focus' event is not received by FocusTracker when the tabs for these views are clicked on.

Kindly help me solve this.

#2

Each widget should implement onActivateRequest and focus something.

#3

thank you, @akosyakov.
Here is my simple web view widget:

@injectable()
export class WebViewWidget extends ReactWidget {

    // Url of the webpage to be opened
    url: string = '';

    public initialize(title: string, url: string, closable: boolean) {
        this.url = url;

        // Initialize
        this.title.label = title;
        this.title.caption = title;
        this.title.closable = closable;
    }

    /**
     * Content to render in the UI
     */
    public render(): React.ReactNode {
        return <React.Fragment>
            <div className='web-view-content'>
                <div className="web-view-content-inner">
                    <iframe src={this.url}></iframe>
                </div>
            </div>
        </React.Fragment>
    }

    protected onActivateRequest(msg: Message): void {
        super.onActivateRequest(msg);
        this.node.focus();
    }
}

I’m creating an object of WebViewWidget and adding to the center panel. I have added the method onActivateRequest as you suggested. But, still FocusTracker doesnt seem to track this widget. Am I missing somethig ? Please help. (Sorry, my code is still based on theia v0.8.0)

Thank you !

#4

this.node should be focusable, otherwise browser will do nothing, google tabIndex, please use 0 to integrate nicely with DOM flow

#5

@akosyakov, Thank you very mich.
Sample code would be very helpful. :slight_smile:

#6

@akosyakov & all others,

Here is the sample custom theia application to demonstrate this behavior:


(Please note that it is based on theia v0.8.0)

Here are the steps to see the error described above:

Please refer to this file in the above repo for the implementaion:
serverevent/src/browser/command-contribution.ts

It has methods to:

  1. add web views and
  2. Subscribe to & handle “active changed” event from shell.

Please help me solve this. Thanks in advance.

#7

@rs I believe Anton has already provided some information regarding the onActivationEvent (which I believe is never explicitly handled and the default implementation from widgets is a no-op) and how it should be handled in his comments.

    /**
     * A message handler invoked on an `'activate-request'` message.
     *
     * #### Notes
     * The default implementation of this handler is a no-op.
     */
    protected onActivateRequest(msg: Message): void;

Unfortunately, I do not think it is practical for the community to help each time an implementation issue is encountered and to resolve the problems for the author.

#8

@vince-fugnitto, Thank you very much for the direction … I shall surely try this !
(sorry, i’m not an expert in this).