BsTab does not work with embers hash-router anymore

[tmlrd42]

https://github.com/kaliber5/ember-bootstrap/blob/0ee98480febf5fb6c6de5ff7e40c6e50fc671bfa/addon/components/bs-tab.hbs#L29

[tmlrd42]

Because the BsTab links contain fixed tags, once you click them, you change the page to default. This is no problem with the default router, but if you configure your project to use the hash-router to avoid having to configure your server, you simply are navigated to your entry page, once you click a tab anywhere...

[nickschot]

It's been a while, but I've worked around this for one of my projects by extending ember-bootstrap/components/bs-tab in my own project with:

// app/components/bs-tab.js

import BsTab from 'ember-bootstrap/components/bs-tab';
import { action } from '@ember/object';

export default class Tab extends BsTab {
  @action
  select(id, event) {
    event.preventDefault();

    return super.select(...arguments);
  }
}

[jelhan]

Is this still an issue with current Ember and Ember Bootstrap? It has been a long-time since this has been reported.

If it's still an issue, a reproduction would be helpful. Or maybe even a fix. The workaround mentioned by @nickschot seems to be a good starting point.

[tmlrd42]

Hi,

yes, this is still an issue…

The real problem is that at some point, the default behavior in ember changed, regarding the propagation of the click event.

When you make an tag without a href=’#’, the click does not get propagated, but the default action did swallow the click by default. In later versions we used the action-helper. After changing to on-helper, the behavior changed, so that the default is NOW to propagate the event and bubble it upwards. In applications with the hash router in use, the click on tags effectively causes the hash router to route to the index route then, each time you click on the tab of the tab component. You can either remove the href=’#’ on the a tags to change the behavior or the better solution would be to use the ember-event-helpers like stop-propagation to effectively restore the old ember behavior like it was with older action helpers. This would fix the problem too and not cause issues with the linter… My current solution in my projects is to derive an own hashrouter and override the onhashchange to effectlvely undo the change from the tab-component when it is caused by a href=’#’ click. Not a good solution. But the best workaround until the propagation/bubbling is fixed in your component. Without that it is not usable, since each click on a tab changes the url to the index route …

So I really appreciate, if this is fixed.

With the standard router (not the hashrouter), you see this too. But there it is not a problem, because it does not change the route you are on.. It just adds a #component-id to your url… (But even that should not happen, because the click should be swallowed and not bubbled up and cause a hash-change event)

So the basic problem here is the missing stop-propagation on the clicks everywhere…

Grüße / Regards Jürgen Starek Senior Software Developer

Von: Jeldrik Hanschke @.> Gesendet: Freitag, 20. Januar 2023 00:03 An: ember-bootstrap/ember-bootstrap @.> Cc: Starek Jürgen @.>; Author @.> Betreff: Re: [ember-bootstrap/ember-bootstrap] BsTab does not work with embers hash-router anymore (Issue #1673)

Is this still an issue with current Ember and Ember Bootstrap? It has been a long-time since this has been reported.

If it's still an issue, a reproduction would be helpful. Or maybe even a fix. The workaround mentioned by @nickschothttps://github.com/nickschot seems to be a good starting point.

— Reply to this email directly, view it on GitHubhttps://github.com/ember-bootstrap/ember-bootstrap/issues/1673#issuecomment-1397721838, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABDGYWW6H7U5X5R3TPVQ3NLWTHBZLANCNFSM5HF4KUUQ. You are receiving this because you authored the thread.Message ID: @.@.>>

[jelhan]

With the standard router (not the hashrouter), you see this too. But there it is not a problem, because it does not change the route you are on.. It just adds a #component-id to your url… (But even that should not happen, because the click should be swallowed and not bubbled up and cause a hash-change event) So the basic problem here is the missing stop-propagation on the clicks everywhere…

I tested the behavior on official Bootstrap docs and can confirm that it is not adding the hashes to the URL: https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior So fixing that not only for hash based router but in general seems to be the correct way forward.

@simonihmig Any concerns?

[darrenw-npi]

It's been a while, but I've worked around this for one of my projects by extending ember-bootstrap/components/bs-tab in my own project with:

// app/components/bs-tab.js

import BsTab from 'ember-bootstrap/components/bs-tab';
import { action } from '@ember/object';

export default class Tab extends BsTab {
  @action
  select(id, event) {
    event.preventDefault();

    return super.select(...arguments);
  }
}

You sir are an absolute legend! Thank you for this. I have just made one slight change and that is the add a null check on event as I had some clicks coming through from a nav item without an event. i.e.

select(id, event) {
  if (event) {
    event.preventDefault();
  }

  return super.select(...arguments);
}