Erroneous DOMException in dom.js?

@jeremyruston What do you think might be going on here - Firefox/gecko bug?

Doesn’t matter whether I quote the attr value or not - same complaint. I was just about to post a bug on Github (due to the after effects of this which were driving me crazy) when I spotted the console.log statement (where the breakpoint is placed). So TW is faithfully reporting the “error” via the catch even though it’s a valid selector, evidenced in the console.

Ideas? (Other than reporting it on Mozilla’s bugzilla).

I notice the query selector down in the console isn’t the same as the panel on the right. Don’t know if that’s relevant, but it seems a little odd. Maybe a clue?

quotes? I mentioned those. Or was it something else?

Does Edge or Chrome show the same logs?

@pmario Sadly, I can’t test that now, but I suspect not…

I had a severely cut down version of my code in a tiddler on tiddlywiki.com doing the obvious, trying to see what it would do on a vanilla TW. That’s what the screenshot shows. Then I spotted this, at the bottom…

image

That’s DuckDuckGo trying to do its thing to protect me from the evil ones. So, in process of trying to figure that out, I lost that cut down version of the code.

It’s late here so I’m gonna quit. I’ll take another look tomorrow.

how does the wikitext code look like, that causes the exception from the OP? It’s impossible for me to replicate it.

I might suggest that’s focusing on the wrong thing. Regardless of the wikitext, the issue is manifested in querySelectorSafe in dom.js given a valid constructor, tested “live” in the console by hand.

But here’s the “offending” line in my code.

     <$action-sendmessage $message="tm-focus-selector" 
       $param=<<selector>> />

Here’s the complete (but edited down) version of the code:

\define td-selector() 
"td input"
\end

  \define editor-click()
   \define focus-multi()
    <$let selector=<<td-selector>> for=<<dom-for>>>
     <$log $$message=focus-multi $$filter="fld for dom-for selector"/>
     <$action-sendmessage $message="tm-focus-selector" $param=<<selector>> />
    </$let>
   \end focus-multi

   <$let fld=<<dom-for>>>
   <$log $$message=editor-click $$filter="active-editor fld dom-for"/>
    <$action-setfield $tiddler=<<active-editor>> $field=<<fld>> $value=multi />
    <<focus-multi>>
   </$let>
  \end editor-click

<$let fld="my-field" active-editor="$:/.rgt/bk/macro-sifter/active-editor">
<$eventcatcher selector="td" $click=<<editor-click>> tag=div stopPropagation=never>
<table><tr>
 <td for=<<fld>> class=`$(fld)$`>Stuff</td>
 <td for=<<fld>> class=`$(fld)$`><$edit-text tag=input tiddler=<<currentTiddler>> field=<<fld>> /></td>
</tr></table>
</$eventcatcher>
</$let>

And the console output:

Removing the double-quotes from the td-selector text body seems to fix the problem for me. At least, it does not trigger any exceptions.

\define td-selector() 
td input
\end

They were just a tryout. Weird.

Thanks

Now I’ll try to get back to what caused all this. I might be back. :wink:

@pmario

This is what got all this started. First, an image of the UI using that code…

It’s a simple enough idea to search my wiki for macros et al. When the user uses the top form with one field (Find single term) the border (box-shadow) glows green. When the user uses the lower form (Word 1, … Exclude 8) its border glows green ← that’s the state in the screenshot.

What I want to achieve:

When the user clicks in the top form, pretty much anywhere, focus is placed in the input box – easy, there’s only one edit box. That’s working fine.

When the user clicks in the lower form, close to an input (in the title say), focus is placed in the associated input box – not quite so easy, but it’s now working. However, there’s one thing that’s driving me crazy and its all to do with building that selector (a bit more complex than the edited down thing we looked at earlier).

Note: I considered using <label for...> but I shouldn’t need to. Maybe I will, later, but for now, I’d just like to solve this just to understand why it didn’t work:

  \define editor-click()
   \define focus-single()
     <<alog focus-single "dom-data-for">>
    <$action-sendmessage $message="tm-focus-selector" 
      $param="table.single-term-editor-table td[data-for=filter-single-term] input"/>
   \end focus-single
   
   \define focus-multi-WORKS()
     <<alog focus-multi-WORKS "dom-data-for">>
     <$action-sendmessage $message="tm-focus-selector" 
       $param=`.multipart-editor table td[data-for=${[<dom-data-for>]}$] input` />
   \end focus-multi-WORKS
   
   \define focus-multi-FAIL-1()
     <$let selector=`.multipart-editor table td[data-for=$(dom-data-for)$] input`>
     <<alog focus-multi-FAIL-1 "dom-data-for selector">>
     <$action-sendmessage $message="tm-focus-selector" 
       $param=<<selector>> />
     </$let>
   \end focus-multi-FAIL-1
   
   \define focus-multi-FAIL-2()
     <<alog focus-multi-FAIL-1 "dom-data-for">>
     <$action-sendmessage $message="tm-focus-selector" 
       $param=`.multipart-editor table td[data-for=$(dom-data-for)$] input` />
   \end focus-multi-FAIL-2
   
   
   <$let x=<<dom-data-for>>>
    <<alog editor-click "x dom-data-for active-editor">>
    <$if value=<<x>> match="filter-single-term">
     <$action-setfield $tiddler=<<active-editor>> $value=single />
     <$action-timeout delay=50 actions=<<focus-single>>/>
    </$if><$else>
     <$action-setfield $tiddler=<<active-editor>> $value=multi />
     <$action-timeout delay=50 actions=<<focus-multi-WORKS>> />
    </$else>
   </$let>
  \end editor-click

I’m intrigued to know why focus-multi-FAIL-1/2 both fail.

So a filter substitution works (in focus-multi-WORKS) but a variable substitution in FAIL-1 and FAIL-2 does not work.

Ideas?