Skip to content

Guard tab auto-activation against a stale remembered tab id (#2922) - #3149

Open
wakqasahmed wants to merge 1 commit into
orchidsoftware:masterfrom
wakqasahmed:fix/issue-2922-tabs-stale-id
Open

wakqasahmed wants to merge 1 commit into
orchidsoftware:masterfrom
wakqasahmed:fix/issue-2922-tabs-stale-id

Conversation

@wakqasahmed

Copy link
Copy Markdown
Contributor

Fixes #2922

Proposed Changes

  • tabs_controller.js remembers the last active tab id per pathname in localStorage and, on connect(), replays it with Tab.getOrCreateInstance(document.getElementById(activeId)).show(). If the stored id doesn't resolve to an element on this particular render of the screen (same pathname reused for different content, tab markup changed since the id was saved, etc.), document.getElementById() returns null and Bootstrap's Tab throws trying to read config off it, breaking auto-activation and any other init code that runs after it.
  • Only call Tab.getOrCreateInstance() once the remembered id has actually resolved to an element.

Same as the other JS controller fixes in this repo, there's no automated test harness to hook a regression test into, so this was verified by tracing through the controller's connect() logic for both the case where the stored id matches an existing tab and the case where it's stale.

…ftware#2922)

connect() reads the last-active tab id for the current pathname from
localStorage and calls Tab.getOrCreateInstance(document.getElementById(activeId)).show()
without checking that an element with that id still exists. If the
stored id belongs to a tab that isn't present on this particular
render of the screen (route reused for different content, tab markup
changed since the id was saved, etc.), getElementById returns null and
Bootstrap's Tab throws trying to read config off it, breaking tab
auto-selection and any script that runs after it on page load.

Only call Tab.getOrCreateInstance() when the remembered id actually
resolves to an element.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Tab selecting Javascript Error

1 participant