Categories/Tags breadcrumb glitching on home page

Contribute Bug
1

Hello, I got a quite annoying bug on Foundation, when I connect to my website for the first time I can see the category/tag breadcrumb just like this:

imageas well as a long “create a new topic’“ bttn

but when I refresh the page it changes to something like this:

image
image399×500 78.5 KB

with only the “Latest” bttn and a Topic image button to create a new topic (without the long Create a new topic button")

Note that these aren’t my screenshots.

  • It still happens with a fresh Foundation instance
  • It doesnt seem that I have any component/plugin messing around with it

When inspecting the “bugged” page I can see the following:


  <ol class="category-breadcrumb hidden">
  <!---->

      <li>
        <details id="ember8" class="select-kit single-select combobox combo-box category-drop ember-view category-breadcrumb__category-selector">    <summary aria-label="Filter by: Categories" name="Filter by: Categories" data-name="Categories" data-value="" tabindex="0" role="listbox" id="ember8-header" class="select-kit-header single-select-header combo-box-header category-drop-header ember-view"><div class="select-kit-header-wrapper">
      <div title="Categories" data-name="Categories" class="select-kit-selected-name selected-name choice">
<!---->
<!---->
    <span class="name">
      Categories
    </span>

<!---->  </div>


  <svg class="fa d-icon d-icon-angle-right svg-icon fa-width-auto angle-icon svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#angle-right"></use></svg>
</div></summary>

  <div id="ember8-body" class="select-kit-body ember-view" style="position: absolute; width: 370px; top: 0px; left: 0px; transform: translate(10px, 3px);"><!----></div>
</details>
      </li>

      <li>
        <details id="ember10" class="select-kit single-select combobox combo-box tag-drop tag_all ember-view">    <summary aria-label="Filter by: Tags" name="Filter by: Tags" data-name="Tags" data-value="" tabindex="0" role="listbox" id="ember10-header" class="select-kit-header single-select-header combo-box-header tag-drop-header ember-view"><div class="select-kit-header-wrapper">
      <div title="Tags" data-name="Tags" class="select-kit-selected-name selected-name choice">
<!---->
<!---->
    <span class="name">
      Tags
    </span>

<!---->  </div>


  <svg class="fa d-icon d-icon-angle-right svg-icon fa-width-auto angle-icon svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#angle-right"></use></svg>
</div></summary>

  <div id="ember10-body" class="select-kit-body ember-view" style="position: absolute; width: 370px; top: 0px; left: 0px; transform: translate(10px, 3px);"><!----></div>
</details>
      </li>

  <!---->
</ol>

<!---->

  <ul id="navigation-bar" class="nav nav-pills">
    <li>
      <button class="btn no-text fk-d-menu__trigger list-control-toggle-link-trigger" aria-expanded="false" data-identifier="list-control-toggle-link" data-trigger="" type="button" id="ember16">
<!----><!---->
    
          <span class="list-control-toggle-link__text">Latest</span>
          <svg class="fa d-icon d-icon-discourse-chevron-expand svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-chevron-expand"></use></svg>
        


<!----></button>

<!---->
    </li>
    <li>
      <!---->
    </li>
</ul>

<div class="navigation-controls">
<!---->
  <div class="row dismiss-container-top"><!----><!----></div>

<!---->
<!---->
<!---->
  <!---->

    <div class="d-combo-button" role="group" aria-label="New topic and drafts">
  
    <button class="btn no-text btn-icon d-combo-button-button btn-primary" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg>  <span aria-hidden="true">
      ​
    </span>
    
  

<!----></button>


<!---->
</div>


  <!---->

<!---->
<!----></div>

<!---->
<!---->

I am no dev but I guess the issue here could be the “category-breadcrumb hidden” ? “Category-breadcrumb hidden” does not appear on initial load (when the “bug” hasnt appeared yet, i.e. before refreshing the page.) only normal category-breadcrumb.

Thanks all.

2

The second screenshot is the mobile version.

Are you getting that consistently after every refresh? Does it switch back and forth?

And, is this behaviour on mobile or on desktop?

3

Is that really what you see “for the first time” because if you see the “new topic” button, you’re logged in.

The page you show that has no “create new topic” button is for a logged out user.

Maybe you should make your own screenshots so that you can see what is really happening.

1 Like
4

No, its random but relatively persistent. I guess you could think of it as “cycles”.

Both.

5

I’m talking about when users are logged in

There’s nothing more available than the screenshots in my post sadly, it just keeps switching from Screenshot 1 to Screenshot 2.

Additional Info in case it helps:

  • js.categories.categories_label in Site Texts is edited from categories to Categories
  • I’m trying to enable/disable The discourse breadcrumb links component (that I had enabled) to see if it does something. Even if chances are low.
1 Like
6

Couldn’t we simply block “.category-breadcrumb hidden” from ever appearing again?

7

Try in general with safe mode first, so we can see if it’s a core issue or not.

2 Likes
8

Still having the same behavior.

What about this? Is it possible? Thank you.

9

No, look, it’s wholly unclear what is going on at the moment. But you are saying youre seeing the mobile version appear on desktop, so that’s something bigger. As Jay also said, your screenshot being logged out doesn’t really help to identify the problem.

I think a screen recording is in order to better understand what you’re experiencing. Check the console as well please.

2 Likes
10

The nav bar (where theres usually “All categories” / ”Tags” or “Latest” is buggy.

Sometimes the nav bar shows up like this (usually on first login):

image(this is what I want)

but when I start exploring my self-hosted Discourse instance and refreshing the page (multiple times), the nav bar suddenly changes to this, “Latest”:

image
image399×500 78.5 KB

The only thing that matters in the 2nd screenshot is the “Latest” aka nav bar which changes completely and erases the “All categories/tags” buttons, don’t focus on anything else in the screenshot as it is a completely random one.

Thank you.

11

Is it that you’re getting the core your want when you visit /categories and not at other times? Maybe some users have changed their home page from /categories or are otherwise getting a different view.

I’m pretty sure that’s what you’re describing. When you’re at /latest then that’s what is in your picture and when you are at category you’ll get the other view

If your site is not login-required then it might help to share your url

12

I don’t think so unfortunately. All the bug “cycles” appear on normal “Site.com” (my landing page is site.com on Latest but without site.com/latest