Clicking in a floating menu takes input focus away from current app

I’ve created a floating menu which implements most of the LaTeX symbol cheat-sheet. (Screen shot shown below, source available here: https://jmckalex.org/btt/latex-no-km.html.) It is set up so that tapping on each <span> containing a symbol name remotely triggers a Keyboard Maestro macro to insert the appropriate LaTeX code at the cursor. (The URL above has removed my remote trigger URL for security reasons.)

Now, this works great if I use it from my iPhone via BTT Mobile: tapping on the symbol causes it to be inserted in whatever editor I’m using. However, if I have the floating menu shown on my laptop, it seems that when I click on the span in the floating menu, the input focus is transferred to the floating menu and so no text is inserted (although I’ve verified the Keyboard Maestro macro is triggered).

I suspect there might be a trivial fix, but I can’t think of what it is. And if people would like me to share this floating macro code, I’m more than happy to once I clean it up a little more!

Here are a few more details about what seems to be going on:

  • For a normal floating menu populated with standard items, clicking on the the button does not cause the input cursor in the current text editor to disappear, which means that the macros to insert or manipulate text work as they should.
  • For a floating menu populated with a webview, clicking on the webview causes the input cursor in the current text editor to disappear, which means that the macros to insert or manipulate text do not work because the editor does not have focus.

Webviews by default always try to capture keyboard focus.
You can workaround this for now by running this terminal command once while BTT is quit:

defaults write com.hegenberg.BetterTouchTool BTTDisableFloatingMenuKeyboardInput YES

I will make this a per-menu setting soon.

Here is some example HTML/JS I used for testing this quickly:

<html>
<head>
<script>

async function pasteSomething() {
    let result = await paste_text({ text: '<strong>Hello world</strong>', format: 'NSPasteboardTypeHTML', insert_by_pasting: true });
    return result;
}
</script>
</head>
<body>
<button onclick="pasteSomething()">
Paste something
</button>
</body>
</html>

Maybe in you case it also makes sense to use BTT's paste_text function - should be a bit faster than triggering some external macro

The defaults write suggestion did the trick — the floating menu is working perfectly now. And using paste_text definitely speeds things up a lot!

One question: by disabling floating menu keyboard input, it becomes impossible to ever enter text into a field or textarea in a floating webview. Might it be possible, in the future, to make this something which is dynamically adjustable? I can imagine situations where I might want to be able to enter text into a floating menu (say, to type some classes which should be added to any html element inserted), but then revert back to the behaviour of having the webview not grab focus most of the time.

I’ll tweak this floating menu a little more and, once I’ve stripped it of any dependencies other than BTT, I’ll make it available.

Nice!

The latest alpha adds a menu property for this:

(not yet tested)

I will also be possible to update that property dynamically (also not yet tested)

1 Like

I’ve been working on stripping out all the unnecessary cruft from the LaTeX Math Symbols panel — the most recent code is here: LaTeX macros for BTT — and I noticed that this function:

async function insertLaTeX(symbol) {
    await paste_text({ text: `\\${symbol}`, format: 'NSPasteboardTypeHTML', insert_by_pasting: true });
}

works if the HTML is loaded for a floating menu webview item running on the Mac but it doesn’t work for a floating menu webview item running in BTT Mobile. I’m running BTT 5.670. My understanding was that all the enhanced javascript functions in a floating menu webview running on the mac should also work if the floating menu was running in BTT Mobile… Is this a bug?

I have mostly finished the JS function implementations for BTT Mobile, they will all be included in the next Testflight beta later this week (took a bit of a break on this, but am currently merging toghether the last missing parts like this one)

:raising_hands:

That’s so great to hear!

I’m really excited to see all of this working. This kind of configuration has been my holy grail of setups. A few years ago I did a really rough proof-of-concept app using someone else’s PeerTalk code, in Swift, to implement a WebView on an iOS device that extended the JavaScript interpreter to run code locally on the attached Mac — see here: Sideboard . (This is where the LaTeX cheat sheet came from, because I had already written that for that project.) But I wasn’t a good enough programmer to make it work beyond a super rough proof-of-concept for me alone… the iOS device had to be physically wired to the mac, there was no way to load pages into the app, etc.

BTT Mobile has so much promise. When I have time, I’m going to figure out how to configure “app changed” triggers (on the Mac) to invoke show/change settings in an attached BTT Mobile webview. This will be trivial to implement, but it will mean that you can easily set up context sensitive buttons, etc. that appear and disappear based on the app which is currently active on the mac.

Furthermore, from what I’ve seen it should be possible to shove data from the Mac to the iOS device running a BTT Mobile session, so graphics and information about various operations can be transferred to the iOS device. That means the attached iOS device isn’t just a dumb toolbar, but a real-time information panel that reflects the state of the attached Mac, and can have control panels that adapt dynamically.