Bug with "search_banner.search_button_text" shown in search banner theme component

[Luke_Cousins]

We’re using Search Banner and having this issue.

AFAIK this has only started happening following a recent update.

Any help would be much appreciated. Thank you.

[Luke_Cousins]

I think this is caused by UX: add optional search button text (#33) · discourse/discourse-search-banner@eeeb391 · GitHub not being as optional as it suggests

[Lilly]

i can’t reproduce this on my forum and i’m on latest beta

maybe try reinstalling the component (or updating it if you haven’t done so)

[Luke_Cousins]

Yes, we’re experiencing this with all the latest versions for everything installed.

I believe the issue is related to en vs en-GB (in my case, at least).

The issue was reported to us by users (who, I presume, have their language set to en).

Any help would be much appreciated.

[Luke_Cousins]

Using the en locale is pretty common. Is there a workaround before this bug is fixed? It’s pretty prominent at the top of all pages

[Canapin (Coin-coin le Canapin)]

I couldn’t repro this issue.

Until a problem is identified and fixed, you may use this CSS to hide the button:

.custom-search-banner-wrap .btn.search-icon span {
    display: none;
}

Or alternatively, if you want to keep a clickable text:

.custom-search-banner-wrap .btn.search-icon {
    span {
        display: none;
    }    
    &:before {
        content: "Search";
    }
}

If you set your own locale to the same as your users who experienced the issue, and then refresh the component’s setting pages, is search_banner.search_button_text empty?

[Luke_Cousins]

Thanks @Canapin

I’ve gone with the shorter (first) CSS and that’s done the trick

@Canapin

If you set your own locale to the same as your users who experienced the issue, and then refresh the component’s setting pages, is search_banner.search_button_text empty?

Yes, so the problem occurs with en but not with en_GB. If I toggle my interface locale, I see the search_banner.search_button_text box empty in both cases.

Thanks for your help.

[awesomerobot (Kris)]

hmm strange, I don’t see the issue on any language I set — usually this type of issue appears when a language is missing the translation key entirely… but it’s defined in the theme, and should fall back to an empty string unless it has a value added in the settings.

I wonder if there’s a conflict with another theme or a plugin somewhere? If you go to the search banner theme in admin/customize/themes and click the preview button to view it in isolation, does the problem persist there?

[Luke_Cousins]

Yes, I do see it when using the Preview button (I didn’t need to remove the CSS workaround).

I’ve also tried deleting the theme component and installing it fresh from the git repo, and the problem still persists, I’m afraid.

In case it’s relevant, our default locale is English (UK).

Thanks for your help.

[awesomerobot (Kris)]

I haven’t forgotten about this, but I’ve run out of ideas. I’ve tried multiple languages, including all varieties of English and still can’t manage to reproduce the issue. I’ve also checked some other sites that use this component and they don’t have this issue.

[Moin]

I think something with the theme translation doesn’t work when your site’s default locale is not English (US). When I set it to English (US), the Search Banner works with its default settings for every user’s locale
(English (US), English (UK), & German)

But when I change the site’s default locale to English (UK), without editing the Theme’s settings, the banner is broken in English US:
(English (US), English (UK) & German)

The same happens when I choose German as the site’s default locale.

[awesomerobot (Kris)]

ahh I see, thanks! I can reproduce this when the site’s locale is changed to something other than English-US and the user’s locale is set to English-US — that configuration wasn’t clear to me when I tried initially.

This will be fixed the next time the component is updated: FIX: don't use fallback key as button text by awesomerobot · Pull Request #55 · discourse/discourse-search-banner · GitHub