search

tgrosinger / tw5-checklist

Simple checklist widget for TiddlyWiki5:
https://tgrosinger.github.io/tw5-checklist/
51 stars 12 forks source link

CSS highlights the first item in every open tiddler with a list, on hover #48

Open flygohr opened 5 years ago

flygohr commented 5 years ago

Not much to say here, attaching a screen: 2019-05-08 10_47_50-Window

tgrosinger commented 5 years ago

Hi @ExoCode17, I'm not sure I understand what the issue is. Are you looking for it to not highlight?

bepuzzled commented 3 years ago

I think the issue (have replicated here in Tiddly Desktop and a browser) is that hovering over the first element in the second tiddler's list also highlights the first element in the first tiddler's list. Worse, clicking the first element of the second tiddler actually checks off an element in the first tiddler :(

image

steps to replicate:

  1. navigate to https://tgrosinger.github.io/tw5-checklist/
  2. create a tiddler "test A" with a two element checklist in the body
  3. whilst keeping tiddler "test A" open, create a tiddler "test B" and add also a two element checklist to the body
  4. hover over the first element of test A's checklist, note that the first element of test B is also highlighted
  5. click the first element of test A's checklist, notice how the first element of test B is marked done
bepuzzled commented 3 years ago

I think this issue is based on the use of match.index, in $:/plugins/tgrosinger/tw5-checklist/checkbox-wikirule.js, to link the label to its checkbox input element.

More specifically, the id attribute of the input element and the for attribute of the matching label element are both set to match.index; this is based on the position of the pattern in the tiddler text. As a result if two tiddlers have a checkbox pattern at the very start, they will both have their first input id and label for set to 0, which confuses the browser for hover or click event handling.

This happens again on line two if the same number of characters is used leading up to the second checkbox pattern in both tiddlers. More generally, this issue will happen any time two checkbox patterns are a the same position (in their respective tiddler text), for two tiddlers that are shown/rendered simultaneously.

As a result, I think it is imprudent to set the id attribute of the input element and the for attribute of the matching label to a value based on position in text alone. I recommend either using a random value (using Math.random()) or encoding the tiddler title (which is unique) in addition to the position (concatenate) if that information is available from the wikirule parser (unclear with my limited knowledge).

I implemented the former (using Math.random()) and that has solved the issue for me.