chrisgurney/obsidian-note-toolbar

Clicking twice on a button to execute the action

onyxogen opened this issue · 10 comments

Description of the bug
Most of the time it is needed to click twice on a button to execute the action.

Steps to reproduce

Click on a button with a command like "File explorer"

Expected behavior

First click opens the file explorer

Desktop environment:

  • OS: Linux
  • Obsidian version: newest
  • Note Toolbar version: newest

Just ask if I can help to reproduce the bug

@onyxogen Thank you!

The good news is I'm able to reproduce in my dev environment (macOS) with the Show file explorer command, in combination with closing the file explorer afterwards. (One theory is that this takes the focus off of the editor pane.)

Are there any other commands you've experienced this behaviour with?

@onyxogen Okay, here's how I reproduced the issue:

  1. Click the button in the toolbar that executes Show file explorer → file explorer opens
  2. Click the Collapse icon in Obsidian's toolbar to close the file explorer
  3. Click the button in the toolbar again → nothing happens
  4. Click the button in the toolbar again → file explorer opens

You can actually see the filename text "Fixed Plus Sticky" in my example change to a darker color when clicking the Collapse button (I think because the focus is off of the note) and back to a lighter color when clicking in the toolbar. Hence the need for the second click to put the focus back in the note and then execute the command.

CleanShot 2024-05-13 at 21 25 47

Is this your experience as well? Are there other scenarios + commands where you've encountered this issue?

For me the problem happens even without collapsing the left toolbar.
But I do observe the color fade in the breadcrumb label too.
The problem is also on "show bookmarks" and direct links to files so it's not limited to the file explorer command.

It somehow looks like the first click draws focus to the middle pane and only after that the button becomes responsive to clicks. If the button before it changed something in the left pane you can reproduce it quite good: The left pane seems to steal the focus and because of this there is a second click needed...?

I also face this issue with a button of mine. It's a command to insert a very simple Templater template, a writing placeholder for things to come back to later:

✏️ (<% tp.file.cursor() %>)

If I insert the template the usual way using the command prompt, then I can immediately start typing inside the brackets, where Templater places the cursor. However, when I insert this template using a Note toolbar button, the editor looses focus, and I can't type without clicking back into the note.

Investigation so far:

I've asked on the Discord how to capture the click that occurs when the user switches focus back to the note... but didn't get responses. I haven't read anything in the API yet that might help, either.

Plug-ins all work a little differently. In Note Toolbar's case, the plugin injects the toolbar directly into the note so requires focus in the note's editor to interact with the toolbar.

There may perhaps be other ways to put the toolbar at the top of the note, or to live outside of the editor window, while still observing the note. More to learn!

Investigation so far:

I've asked on the Discord how to capture the click that occurs when the user switches focus back to the note... but didn't get responses. I haven't read anything in the API yet that might help, either.

Plug-ins all work a little differently. In Note Toolbar's case, the plugin injects the toolbar directly into the note so requires focus in the note to interact with the toolbar. There may perhaps be other ways to put the toolbar at the top of the note, or to live outside of the editor window, while still observing the note.

Maybe you are looking for something like: app.workspace.activeLeaf.view.editor?.focus()?
However, when I tried to use this in a template to set the focus back to the editor, the template content would be duplicated, but strangely, only when inserting under a heading.

This was when inserting a simple Templater template for writing placeholders:
✏️ (<%* app.workspace.activeLeaf.view.editor?.focus(); %><% tp.file.cursor() %>)

What I think I need, at least with the current setup, is the ability to listen for a click event so that when focus is put back on the editor, I can see where the user clicked and pass it to the toolbar.

I could be wrong though!

@FeralFlora @onyxogen The way I've decided to deal with this is to very slightly decrease the opacity of the toolbar (or floating button) when the editor tab or window is not in focus.

CleanShot 2024-07-30 at 15 39 40

  • The intent is to provide some user feedback that an additional click is required, matching the behavior of the tab and header title when they dim.
  • The amount the toolbar dims is configurable via the Style Settings plugin, under Toolbars > Style > Toolbar: Inactive opacity

This will be in the next beta: 1.10.0-beta-06

It's possible that I'll learn something about resetting focus after diving deeper into scripting support and an API for Note Toolbar (discussion), so I'm leaving this open for now in case there's something I can do to help on the script execution side.