starcitizen.tools - Nothing happens when clicking on search recommendations

[awaitlink]

URL: https://starcitizen.tools

Browser / Version: Safari 17.3.1 Operating System: Mac OS X 10.15.7 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Buttons or links not working Steps to Reproduce:

1. Focus / open the search field.
2. Type in a query.
3. Press on a result with the mouse (not with the keyboard). The result will not open, and the search modal will be dismissed.

The same issue occurs on https://signal.miraheze.org (another case of same MediaWiki theme) and, more interestingly, on https://packages.altlinux.org/en/sisyphus/ (completely different website not using MediaWiki as far as I know) - so it seems like it's a generic web compatibility issue.

It works fine on Chrome and Firefox on macOS, it's just Safari on macOS that has the issue. Safari on iOS also works fine (tapping the search result).

Interestingly, if I:

• Set a breakpoint on the blur event on #searchInput at https://signal.miraheze.org (https://starcitizen.tools doesn't seem to have a blur event there, though the issue is also reproducible);
• Click on a search result;
• Wait a little bit and then simply continue script execution by pressing the button in the debugger,

then the search result is correctly opened.

This was opened as an issue in https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/404 and fixed using a hack, but it appears that doesn't fix it now anymore as I wrote earlier there (https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/404#issuecomment-1684917121).

Browser Configuration

• None

From webcompat.com with ❤️

[azlata]

Thank you for reporting this issue, I was able to reproduce it. Only on Safari, when clicking on a search result, the results list is dismissed and the redirect doesn't happen.

https://github.com/webcompat/web-bugs/assets/164893854/63c47a5f-aab8-45ba-bc74-303e60267dd9

For these 2 other websites, please open separate reports: https://signal.miraheze.org/ https://packages.altlinux.org/en/sisyphus/

Tested on: • Browser / Version: Firefox Nightly 126.0a1 (2024-03-31) / Safari 17.4.1 / Chrome 123.0.6312.86 • Operating System: Mac OS

Notes:

1. Reproducible only on Safari
2. Not reproducible on Chrome and Firefox

Moving to Needsdiagnosis.

[qa_14/2024]

[awaitlink]

Thanks for testing it!

For these 2 other websites, please open separate reports: https://signal.miraheze.org/ https://packages.altlinux.org/en/sisyphus/

I'm not exactly sure if separate reports are needed, though:

• For https://signal.miraheze.org, the stack (MediaWiki + Citizen theme) is the same, so even if the issue needs to be fixed in the site, it's probably going to be in one of those projects and thus will apply to both https://starcitizen.tools and https://signal.miraheze.org as soon as they update. Miraheze usually updates to latest versions pretty quickly; besides, I'm an admin of the wiki at https://signal.miraheze.org.

• As for https://packages.altlinux.org/en/sisyphus/, I provided it as an example that the same issue is reproducible on a completely different stack, which in my opinion a good indicator it's probably not the fault of any of the mentioned websites or projects, but likely rather some kind of bug in Safari with handling the dismissal / blur of such elements.

With that in mind, is it perhaps worth reporting as a Safari bug to Apple right away? Or should I wait at this point for it to be in the https://webcompat.com/contributors/site-outreach phase first?

Though if it is required to make separate reports, I'm happy to make the reports just referencing this one.

[sv-calin]

We are sorry but we do not test/diagnose multiple issues/websites on the the same report, we'd like to keep it clean. If you'd like to file them separately we will look over them as well and link them accordingly. (you could also leave it as it is and wait until the devs diagnose the issue and come up with a response)

[inv_14/2024]

[karlcow]

For https://starcitizen.tools/

<input 
    type="search" 
    name="search" 
    placeholder="Search Star Citizen Wiki" 
    aria-label="Search Star Citizen Wiki" 
    autocapitalize="sentences" 
    title="Search Star Citizen Wiki [⌃⌥f]" 
    accesskey="f" 
    id="searchInput" 
    class="webfonts-changed citizen-typeahead-input" 
    aria-autocomplete="list" 
    aria-controls="searchform-suggestions" 
    aria-activedescendant="">

Then

<li class="citizen-typeahead__item citizen-typeahead__item-action citizen-typeahead__item-chip" id="citizen-typeahead-action-0" role="option">
    <a href="/index.php?title=Special:Search&amp;fulltext=1&amp;search=emancipation" class="citizen-typeahead__content">
        <div class="citizen-typeahead__thumbnail citizen-ui-icon mw-ui-icon-wikimedia-articleSearch"></div>
        <div class="citizen-typeahead__text">
            <div class="citizen-typeahead__header">
                <div class="citizen-typeahead__title"></div>
                <div class="citizen-typeahead__label">Search for text within pages</div>
            </div>
            <div class="citizen-typeahead__description"></div>
        </div>
        <div class="citizen-typeahead__actions">
            <div class="citizen-typeahead__keyboard">↵</div>
        </div>
    </a>
</li>

Sizzle.attr = function(elem, name) {
    if ((elem.ownerDocument || elem) != document) {
        setDocument(elem);
    }
    var fn = Expr.attrHandle[name.toLowerCase()],
        val = fn && hasOwn.call(Expr.attrHandle, name.toLowerCase()) ? fn(elem, name, !documentIsHTML) : undefined;
    return val !== undefined ? val : support.attributes || !documentIsHTML ? elem.getAttribute(name) : (val = elem.getAttributeNode(name)) && val.specified ? val.value : null;
};

function dismissIfExternalEventTarget(checkbox, button, target, event) {
    if (checkbox.checked && !containsEventTarget(checkbox, button, target, event)) {
        setCheckedState(checkbox, false);
    }
}

The click is being capture by other elements and not the a element.

[karlcow]

there is a bug which has been recently fixed. CustomEvent https://github.com/WebKit/WebKit/commit/5b488a0a1b57992e7323e91fb19761139e395ad3

function setCheckedState(checkbox, checked) {
    checkbox.checked = checked;
    var e;
    if (typeof Event === 'function') {
        e = new Event('input', {
            bubbles: true,
            composed: true
        });
    } else {
        e = document.createEvent('CustomEvent');
        if (!e) {
            return;
        }
        e.initCustomEvent('input', true, false, false);
    }
    checkbox.dispatchEvent(e);
}

It could be an instance of this, I will have to test this on a recent build.