{{click}} Command — Discourse "Upload" button not interactive?

[samliew]

Hi there,

I'm trying to use the {{click}} command on a Discourse rich-text editor button, in particular, the "upload" button.

The HTML looks like this (taken from this forum's post editor):

<button class="btn no-text btn-icon upload" tabindex="-1" title="Upload" type="button">
  <svg class="fa d-icon d-icon-far-image svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-image"></use></svg>
  <span aria-hidden="true">​</span>
</button>

This is how I've set it up,

but Text Blaze couldn't find the clickable button element on the page (when I'm composing a post reply and the editor is open).

Command to click failed
.upload did not match any interactive element

Would appreciate some advice to solve this!

[Gaurang_Tandon]

Hi @samliew

Thanks for sharing the detailed post. I see the button has a tabindex=-1, so the user cannot focus it using the Tab key on their keyboard.

We had earlier added this restriction to help users when they accidentally select a non-clickable element (like an arbitrary <div> or a <section> on the page).

However, the button is obviously interactive as you pointed out. We will soon update the {click} command to allow the user to click on all elements.

The update will hopefully be live in the Beta channel by next week. Feel free to email me at gaurang@blaze.today if you'd like to be added there.

[samliew]

Hi @Gaurang_Tandon, thank you for the update (in beta) for "non-interactive" elements.

While I can see that the element is now clicked, I see that "File" fields can only be triggered on user input (at least in Chrome).

The message that I see in the console is:

File chooser dialog can only be shown with a user activation.

I have written a solution on Stack Overflow on this issue a long time ago, so that a click event can be properly dispatched on the element, instead of just using elem.click()

function performClick(elemOrSelector) {
   const elem = elemOrSelector instanceof Element ? elemOrSelector : document.querySelector(elemOrSelector);
   if(elem && document.createEvent) {
      const evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
   }
}

Hope this helps! Let me know if there are any further questions or issues.

--- @samliew

[Gaurang_Tandon]

Thanks for getting back to me @samliew I tried this snippet:

abcd{click: selector=.upload}

When I run it inside this post editor, the File chooser dialog does open for me - on Chrome 138 on macOS 15.5. I also tried it on Chrome 139 on Windows 11 and the dialog opened there as well. Does this "user activation" restriction only affect some specific devices?

[samliew]

Hi @Gaurang_Tandon, sorry for the late response—I was travelling the past few weeks.

It seems that the click selector is now working on the Discourse buttons, and my previous observation was probably due to caching.

Thanks!!

[Gaurang_Tandon]

Thanks for the confirmation!

Note, for everyone else, this fix version is live in production now as well (version 3.2.0).

[samliew]

Hi @Gaurang_Tandon,

Sorry to bother you again. Just to let you know, I noticed that if {click} is placed within a note, it does not trigger the button click. If this is the expected behaviour, that's fine with me.

{note: preview=yes}{click:selector=.upload}{endnote}

[Gaurang_Tandon]

Hi @samliew , no worries, happy to help. The contents of a {note} are usually meant for adding comments to the preview of a snippet. So, they are not inserted when the snippet is submitted.

If you would like to insert the contents of a {note}, you can either 1. remove the note, or 2. use the 'insert' setting, like so: {note: preview=yes; insert=yes}{click: selector=.upload}{endnote}.

[samliew]

I see! I am using {note} to hide the click "button" from the input window.

So to do it my way, I'll just have to use:

{note: preview=no; insert=yes}{click: selector=.upload}{endnote}

Thanks!