Bug 253580 – WoWHead talent calculator does not deselect on Ctrl+Click

• Status: NEW
• Component: UI Events

[Jon]

Using the WoWHead Talent Calculator (https://www.wowhead.com/talent-calc/paladin/protection/) using STP (Release 164 (Safari 16.4, WebKit 18616.1.2)), the behavior used to deselect nodes using right click no longer works. Instead it just brings up the typical context menu. Safari 16.4 and Chrome both work correctly. This behavior is fairly recent, perhaps within the last two STP releases or so.

[Alexey Proskuryakov]

Thank you for the report! Could you please add some more detailed steps to reproduce? I browsed this website for a little bit, but couldn't find where the nodes that could be selected or deselected were.

[Radar WebKit Bug Importer]

<rdar://problem/106456628>

[Jon]

Sure. When the page loads there should be two trees, the class tree (left) and the spec tree (right). Both work the same. If you click on one of the skills in the tree, say the "Hammer of Wrath" skill (left hand tree, top row, right most node), it should select, making the border yellow and add a point to the "Points Spent" counter above the tree. The broken behavior is that you're supposed to be able to right click the same node to deselect it and get the point back to spend somewhere else. Right now the left click behavior works but not the right click.

[Jon]

STP 165 shows the same broken behavior.

[Alexey Proskuryakov]

Thank you. When you say that Safari 16.4 works correctly, which build is that? 

I think that I reproduce the problem in the beta that I have here. When I Ctrl-click, it deselects momentarily, but goes back to selected state once I release the trackpad. Chrome does work as expected.

[Jon]

Sorry, it's Safari 16.3 (Version 16.3 (18614.4.6.1.6)). I see that with the control - click too. In Safari it has the behavior you mention, unselects and then reselects in a flash. In STP it simply brings up the context menu.

[Jon]

On a possibly related note, it seems like the custom context menus on Google drive aren't working anymore either. Right and control clicking on drive items just brings up the typical context menu.

[Alexey Proskuryakov]

We are able to reproduce all the way back to Safari 15.6, so this seems like a site change. Still needs to be investigated as a difference with Chrome.

Could you please file a new bug with detailed steps to reproduce for Google Drive?

[Jon]

I reported https://bugs.webkit.org/show_bug.cgi?id=253727 for the Google Drive bug.

[Jon]

Either the site has changed or it was the same issue as my Google Drive issue (StopTheMadness), but it seems to be working correctly now.

Is there an easy way in Safari to reload without any plugins? (Content blockers are easy).

[Alexey Proskuryakov]

I'm still able to reproduce the issue using macOS 13.3 beta, as described in comment 5.

[Alexey Proskuryakov]

I think that what I reproduce with Ctrl-click is not the original issue, but pretty similar. Maybe we could use this bug to track it, or we could file a new one.

[Jon]

I can confirm that too.

[Karl Dubost]

This is the piece of code which is handling it.
In https://wow.zamimg.com/js/WH/Wow/TalentCalcDragonflight.js?9266e039b4

```
    function _(e) {
      let t = WH.ce('div', {
        className: c + '-tree'
      });
      WH.ae(m.elements.container, t);
      if (!WH.Device.isTouch()) {
        WH.aE(document, 'keydown', (e=>{
          if (e.key === 'Shift') {
            t.dataset.text = 1
          }
        }));
        WH.aE(document, 'keyup', (e=>{
          if (e.key === 'Shift') {
            delete t.dataset.text
          }
        }))
      }
      let a = WH.ce('div', {
        className: c + '-tree-space'
      });
      WH.ae(t, a);
      let n = m.elements.grid = WH.ce('div', {
        className: c + '-tree-grid'
      });
      WH.ae(a, n);
      m.checkpoints.forEach((t=>{
        let n = WH.ce('div', {
          className: c + '-tree-checkpoint',
          style: {
            top: 100 * (t.row - 1) / u + '%'
          }
        });
        if (e) {
          n.classList.add(c${ e })
        }
        WH.ae(n, WH.ce('div', {
          className: ${ c }-tree-checkpoint-line
        }));
        WH.ae(n, WH.ct(WH.term('required_format', t.points)));
        WH.ae(n, WH.ce('div', {
          className: ${ c }-tree-checkpoint-line
        }));
        WH.ae(a, n)
      }));
      let l;
      let s = () =>l = l || requestAnimationFrame((() =>{
        l = null;
        a.style.fontSize = Math.max(9, a.clientWidth / 50) + 'px';
        let e = a.clientWidth / 15;
        if (e < 25) {
          a.dataset.noPointsMargin = 1
        } else {
          delete a.dataset.noPointsMargin
        }
      }));
      s();
      if (window.ResizeObserver) {
        new ResizeObserver(s).observe(a)
      }
    }
```

[Alexey Proskuryakov]

Re-titling, as this now tracks a subtly different issue.

[Karl Dubost]

Giving it another try with STP 183.
on a MacBook with a trackpad.
Going to https://www.wowhead.com/talent-calc/paladin/protection/DABBAAA


1. Activating the top right hammer of the left column (simple click). This adds the connections.

[Log] 2023-12-12T06:51:32.016Z pointerdown 
[Log] 2023-12-12T06:51:32.026Z pointerdown 
[Log] 2023-12-12T06:51:32.027Z mousedown 
[Log] 2023-12-12T06:51:32.028Z mousedown 
[Log] 2023-12-12T06:51:32.028Z mousedown 
[Log] 2023-12-12T06:51:32.037Z selectionchange 
[Log] 2023-12-12T06:51:32.038Z selectionchange 
[Log] 2023-12-12T06:51:32.039Z pointerup 
[Log] 2023-12-12T06:51:32.042Z click 
[Log] 2023-12-12T06:51:32.043Z click 
[Log] 2023-12-12T06:51:32.047Z click 
[Log] 2023-12-12T06:51:32.049Z click 
[Log] 2023-12-12T06:51:32.059Z change-state 
[Log] 2023-12-12T06:51:32.093Z hash-update  (x2)
[Log] 2023-12-12T06:51:32.114Z click 
[Log] 2023-12-12T06:51:32.115Z click 
[Log] 2023-12-12T06:51:32.122Z click 
[Log] 2023-12-12T06:51:32.123Z click 


2. Deactivating with double tap (simple click through double fingers tap on the same icon). This removes the connections.


[Log] 2023-12-12T06:53:06.809Z pointerdown 
[Log] 2023-12-12T06:53:06.818Z pointerdown 
[Log] 2023-12-12T06:53:06.818Z mousedown 
[Log] 2023-12-12T06:53:06.819Z mousedown 
[Log] 2023-12-12T06:53:06.819Z mousedown 
[Log] 2023-12-12T06:53:06.829Z contextmenu 
[Log] 2023-12-12T06:53:06.837Z change-state 
[Log] 2023-12-12T06:53:06.867Z hash-update 
[Log] 2023-12-12T06:53:06.868Z hash-update 
[Log] 2023-12-12T06:53:06.873Z contextmenu 
[Log] 2023-12-12T06:53:06.901Z pointerup 

3. Activating again (same than 1.)

[Log] 2023-12-12T06:54:44.326Z pointerdown 
[Log] 2023-12-12T06:54:44.333Z pointerdown 
[Log] 2023-12-12T06:54:44.333Z mousedown 
[Log] 2023-12-12T06:54:44.336Z mousedown 
[Log] 2023-12-12T06:54:44.336Z mousedown 
[Log] 2023-12-12T06:54:44.343Z selectionchange 
[Log] 2023-12-12T06:54:44.344Z selectionchange 
[Log] 2023-12-12T06:54:44.372Z pointerup 
[Log] 2023-12-12T06:54:44.375Z click 
[Log] 2023-12-12T06:54:44.376Z click 
[Log] 2023-12-12T06:54:44.381Z click 
[Log] 2023-12-12T06:54:44.383Z click 
[Log] 2023-12-12T06:54:44.390Z change-state 
[Log] 2023-12-12T06:54:44.427Z hash-update  (x2)
[Log] 2023-12-12T06:54:44.430Z click 
[Log] 2023-12-12T06:54:44.431Z click 
[Log] 2023-12-12T06:54:44.435Z click 
[Log] 2023-12-12T06:54:44.436Z click 


4. Trying deactivation with ctrl+click (lines are not being removed)

[Log] 2023-12-12T06:59:06.521Z keydown 
[Log] 2023-12-12T06:59:06.524Z keydown 
[Log] 2023-12-12T06:59:06.526Z keydown 
[Log] 2023-12-12T06:59:06.526Z keydown 
[Log] 2023-12-12T06:59:06.526Z keydown 
[Log] 2023-12-12T06:59:06.527Z keydown 
[Log] 2023-12-12T06:59:06.527Z keydown  (x2)
[Log] 2023-12-12T06:59:07.367Z pointerdown 
[Log] 2023-12-12T06:59:07.385Z pointerdown 
[Log] 2023-12-12T06:59:07.385Z mousedown 
[Log] 2023-12-12T06:59:07.388Z mousedown 
[Log] 2023-12-12T06:59:07.389Z mousedown 
[Log] 2023-12-12T06:59:07.394Z contextmenu 
[Log] 2023-12-12T06:59:07.406Z change-state 
[Log] 2023-12-12T06:59:07.454Z hash-update  (x2)
[Log] 2023-12-12T06:59:07.458Z contextmenu 

`It shows the disconnected lines`
`In this state has long as we do not release the click`
`but once we release the click it reconnects them`

[Log] 2023-12-12T06:59:07.492Z pointerup 
[Log] 2023-12-12T06:59:07.495Z click 
[Log] 2023-12-12T06:59:07.495Z click 
[Log] 2023-12-12T06:59:07.499Z click 
[Log] 2023-12-12T06:59:07.500Z click 
[Log] 2023-12-12T06:59:07.503Z change-state 
[Log] 2023-12-12T06:59:07.518Z hash-update  (x2)
[Log] 2023-12-12T06:59:07.520Z click 
[Log] 2023-12-12T06:59:07.520Z click 
[Log] 2023-12-12T06:59:07.524Z click 
[Log] 2023-12-12T06:59:07.525Z click 
[Log] 2023-12-12T06:59:08.380Z keyup  (x2)
[Log] 2023-12-12T06:59:08.380Z keyup 


In step 4, after the pointerup the sequence:

```
[Log] 2023-12-12T06:59:07.495Z click 
[Log] 2023-12-12T06:59:07.495Z click 
[Log] 2023-12-12T06:59:07.499Z click 
[Log] 2023-12-12T06:59:07.500Z click 
[Log] 2023-12-12T06:59:07.503Z change-state 
[Log] 2023-12-12T06:59:07.518Z hash-update  (x2)
[Log] 2023-12-12T06:59:07.520Z click 
[Log] 2023-12-12T06:59:07.520Z click 
[Log] 2023-12-12T06:59:07.524Z click 
[Log] 2023-12-12T06:59:07.525Z click 
```

is probably reactivating the lines. 

Wenson has probably a better idea on why this is happening.

[Karl Dubost]

Some additional notes.

The Ctrl+click is working on Chrome AND Firefox, 
but not the double tap which create a zoom in/zoom out of the page.