How can I return focus to the text editor?

[manngo]

I’m writing a package which steals focus from the text editor. For example you highlight some text and click or a toolbar button or respond to a dialog.

The problem is that the highlight text is still highlighted, which is good, but the text editor has lost its focus.

Is there a way of programatically setting the focus back to the editor pane?

[savetheclocktower]

If you know which editor you want to focus: find its pane, then call activateItem.

[savetheclocktower]

OK, looked into this a bit deeper instead of just working from memory. Sorry!

If you have an instance of Pane, you can call focus on it to move focus to that pane. This is redundant if you're calling getActivePane because the active pane is, by definition, the one that has focus. (It won't have focus if you're in the Developer Tools, but it will still be considered the “focused” pane.)

Pulsar has a number of commands that move focus in a particular direction — to the pane on the left, right, top, or bottom of where it currently is. If I'm in a split-pane view and I want to move the cursor to the pane on the right, I press (on macOS) cmd-K, then Right. Under the hood, these various commands all hit the same code path — and you can see all that code path does is find a pane and call focus on it.

I was wrong to point you at activateItem. A pane can have any number of items within it, but only one is the “active” item. (Think tabs and active tab, but generically named in case you wanted to disable the tabs package in favor of some other hypothetical UI metaphor.) So activateItem just sets which pane item is the active one within a pane. Pane items include text editors but are not limited to text editors. So if you wanted to surface a particular editor in a particular pane (that you knew to exist already), you could call activateItem to ensure it was the active pane item, then call focus on the pane itself.

In your case, since you're talking about restoring focus to something that previously had it, you could crib from a package like command-palette. It doesn't overthink things; it just grabs document.activeElement and assigns it to a property so it can call focus on that thing later on when the palette closes.

[manngo]

Thanks again for your answer. I’m sorry, but I just can’t get it working. It might help if I explain my problem with a clearer example.

Here is a simplified version of what I’m trying to do:

var button = document.createElement('button');
button.innerHTML = 'Test';
button.onclick = event => {
	console.log(document.activeElement);	//	button element
	atom.commands.dispatch(atom.views.getView(atom.workspace.getActivePaneItem()), 'editor:select-word');
	console.log('testing');
};
var testPanel = atom.workspace.addTopPanel({item: button, visible: true});
testPanel.show();
console.log(testPanel);
//	testPanel.destroy()

• Click anywhere in the editor
• Click on the test button

The whole word will be highlighted, as expected, but it doesn’t have the focus; that is the highlight is grey, not blue, and it doesn’t get what I’m typing. I tried using the previous active element, but by the time the button code sees it, it’s too late, as the button is now active.

I can refocus if I click on the space beside the button. If I try to do that programatically, such as document.querySelector(…).click(), or .focus(), it doesn’t help.

[savetheclocktower]

We're moving into general web stuff rather than Pulsar-specific stuff. But here are a couple of suggestions:

• Keep track of the active element when focus changes via focusin events (you need to use addEventListener for those, as there is no onfocusin property) so that you know what it was before the button was clicked. focusin bubbles, so you can listen once on the body and then update a variable every time focus moves.
• Sometimes when you try to programmatically move focus in an event handler, the browser supersedes it by applying the default focusing logic. Like you might try to move focus within that onclick, but the browser is not done moving it to the button yet. So in those cases, a setTimeout with a second parameter value of 0 might do the trick. (setTimeout(() => something.focus(), 0))

[manngo]

I think this is getting weird. I have discovered that if I change the button to a span, I get the behaviour I want. Clicking on the button then propagates to the panel behind it, and I get the highlighted text I’m looking for.

I’d be happy to close this question.

The only problem is that this buys another problem: I can’t get drag & drop working on span elements. I’ll put that in another question as I’ve dragged this one out too far.

BTW what do you mean with “We're moving into general web stuff rather than Pulsar-specific stuff”?

Thanks, as always, for your help.

[savetheclocktower]

BTW what do you mean with “We're moving into general web stuff rather than Pulsar-specific stuff”?

I mean that that specific problem was identical to a problem you'd have on the web. By the time an onclick handler runs, it may be too late to find out what the last focused element was, because focus may already have moved to the thing that was clicked on. That's as true in a web browser as it is in Pulsar.

That said, I'm glad you've found at least one workaround.

[manngo]

And now my final word on this issue. Well, a few words, really.

I’m getting surprising behaviour with button and span elements in the panel. I don’t know whether it’s because of the older version of Chromium or because a panel isn’t a genuine HTML element.

• The button doesn’t appear to propagate its click to its container. That’s why I can’t get it to focus back on the document that way. On the other hand, span does propagate.

  This is not the behaviour if I try this in an ordinary element on a web page.

• I can’t get the span element to respond to the dragstart event, even if it set draggable to true. Buttons, on the other hand drag as expected once I set draggable to true. It’s just as bad if I embed a span inside a button.

  Again, if I try this on an ordinary element on a web page, everything is as expected.

Fortunately, I have discovered a solution, and I’m embarrassed that it’s taken be so long:

let button = document.create('button');
button.onclick = event => {
	//	etc tec blah blah
	atom.workspace.element.focus();
};

I tried focusing on everything else, but I somehow missed that one.

It all works now.