Groups screen displays incorrectly in Safari 14.0.3

[cawbritgit]

Versions

• Pi-hole: v5.2.4
• AdminLTE: v5.4
• FTL: v5.7

Platform

• OS and version: Raspbian 10
• Platform: Raspberry Pi

Browser

• Safari 14.0.3 (16610.4.3.1.4)
• Mac OS 11.2.1

Expected behavior

The Groups screen in the Group Management section of the Pi-Hole admin console should display the status of the group or groups configured.

Actual behavior / bug

Upon initial load, the List of Configured groups section of Groups screen displays a single block of colour (in my case Green for enabled) across the entire pane. Changing the value in the Items Displayed drop-down causes the pane to reload and the group/groups to be displayed correctly.

Steps to reproduce

Steps to reproduce the behavior:

(0. Restart browser, open UI)

1. Go to 'Group Management'
2. Click on 'Groups'
3. See error

Debug Token

• URL: https://tricorder.pi-hole.net/ndbgsx9oei

Screenshots

_Screenshot: actual behaviour:

Screenshot: expected behaviour (also, this is the behaviour once the Display Items value has been changed):

_

Additional context

Add any other context about the problem here.

[DL6ER]

Can you tell if this a new behavior introduced by an update of Pi-hole or Safari?

I do not have a Mac at hand to test this, however, looking at our tests both on Windows and Linux suggests this may be a bug in Safari.

@jfb-pihole may have a Mac for testing things. @RamSet may as well.

[cawbritgit]

Sorry, but I am not a big groups user so I have no history of using the group screens. I will keep an eye on this, and will update if it goes away with future Safari versions.

[RamSet]

I don’t have an updated MAC but on my IOS (Safari 14.0.3) the issue is not present (iPad and iPhone).

[jfb-pihole]

I can confirm this behavior on MacOS Big Sur 11.2.1 with Safari 14.0.3 (16610.4.3.1.4). Green bar across the "list of configured groups", which clears when changing the "Show xx entries" pull down.

This behavior also exists on a separate Mac running MacOS Catalina 10.15.7 with Safari 14.0.3 (15610.4.3.1.6, 15610).

An older version of Safari (Version 12.1.2 (14607.3.9)) running on MacOS Mojave 10.14.6 displays this page normally.

The problem is also not present on the latest IOS 14.4 with latest Safari on that IOS. It appears to be limited to MacOS only.

Without clearing the green bar in this manner, clicking on the green bar in my case toggles the enabled setting of my only group (the default group).

[acyanic]

Hi. I did some investigation, I'm no expert but hope this could help. Sometimes the page displays correctly, eg clicking into say clients then whitelist then back to groups in some order will result in a good display.

I compared the HTML, for the correct and the error type and vs other pages eg Domains.

Within the div element for displaying the table row data and the relevant data field:

• when correct:
  ...div class="toggle btn btn-success btn-sm" data-toggle="toggle" style="width: 80px; height: 0px;"> (plus some other bits) "
• when error:
  ...div class="icheck-primary" data-toggle="toggle" style="width: 80px; height: 0px;"> (plus some other bits) "

Thus the class "icheck-primary" is used rather than "toggle btn btn-success btn-sm" so will be missing formatting.

I don't have the skills to track the logic as the page loads to see why it chooses different routes. I'm learning the inspect element functions in the browser as I go along. There's heaps to look at!

[acyanic]

This html is generated by the ajax call, of course, to build the contents of the database. Seems there are a few issues with Safari not playing well with ajax.
I have had a few times when refreshing the page eventually renders it correctly. Then times when it won't render at all. I've stepped through the code, (not understanding the vendor supplied javascript database management stuff), and can see the page render very well, and then, at the very last exit from the routine, which has a very long logic and/or statement, it explodes the green expand button.

[acyanic]

A bit more research. There are error messages which seem to suggest deprecated usage:
Module : jquery.min.js
Opening lines:
/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e, t) {

Deprecation reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage

error message screenshot:

[acyanic]

I think the TypeError warnings may be red herring, as the depreciated syntax was implemented 4 -5 years ago in jQuery.
I discovered that refresh page causes the 'error' whilst selecting the "Show x entries' toggle or using a simple search causes a correct rendering.

[sbytnar]

This issue is the same problem as #1849, which has an open PR.

[yubiuser]

Fixed with
https://discourse.pi-hole.net/t/pi-hole-ftl-v5-12-web-v5-9-and-core-v5-7-released/51795/1