Tab: Anchor with [href] that contains a slash breaks component

[LilBiggs]

Describe the bug
When an Tab has a url that contains a slash, the Tab control will break. A Tab is linked to a Tab panel using the Tab [href]. Tab.href -> TabPanel.id. If the Tab.href="home/schedule" then the TabPanel.id = "home/schedule".

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/ids-deep-linkable-tabs?file=src%2Fapp%2Fhome%2Fhome-container%2Fhome-container.component.html
2. Open browser Dev-Tools
3. Reload the StackBlitz
4. Notice error in console: Syntax error, unrecognized expression: #home/schedule

Expected behavior
Tab control should work with URL's that contain a slash.

Version
4.39.0-dev

Platform

• Infor Application/Team Name: Infor WFM

Additional context
The core issue is in the ids-enterprise project. However this was found when trying to use the ids-enterprise-ng project. The routes are required for deep-linking.

[tmcconechy]

@LilBiggs took a quick look at this. we can fix it by escaping the forward slashes i.e. $('#home\\/schedule')
But i noticed in your example the links arent connected...

      <a soho-tab-title tabId="/home/schedule">
          Schedule
          vs
      <div soho-tab-panel tabId="home-schedule">      

So wondering if you just want to use home-schedule to solve this instead? As even if i fix the error the example isnt going to work...Or should we just use /home/schedule in both and change it?

[LilBiggs]

I used home-schedule in my example because when I was looking into fixing this, I took the slash and turned it into a dash. So home/schedule was the same as home-schedule.

With the actual fix, we will need to have the ability to set home/schedule for both.

[tmcconechy]

This is tricky actually - im not sure how to fix it because in angular it changes the href to #/home/thing/ and adds a slash.
So the tab body isnt going to match the ID as expected. I can reproduce it with the # but then im not sure what you would put on to make the tabs work.

This is working on https://master-enterprise.demo.design.infor.com/components/tabs/example-url-hash-change.html#tab-number-three without the nested / deeper properties.

Would like to know what @EdwardCoyle thinks

[tmcconechy]

Here is an EP example im testing

<div class="row">
  <div class="six columns">
    <h2>Common In-Page Tabs</h2>
  </div>
</div>

<div class="row top-padding">
  <div class="twelve columns">

    <div id="tabs-normal" class="tab-container">
      <ul class="tab-list">
        <li class="tab">
          <a id="tabs-a-contracts" data-automation-id="tabs-a-contracts" href="#/home/contracts">Contracts</a>
        </li>
        <li class="tab">
          <a id="tabs-a-opportunities" data-automation-id="tabs-a-opportunities" href="#/home/opportunities">Opportunities</a>
        </li>
        <li class="tab is-selected">
          <a id="tabs-a-attachments" data-automation-id="tabs-a-attachments" href="#/home/attachments">Attachments</a>
        </li>
        <li class="tab">
          <a id="tabs-a-contacts" data-automation-id="tabs-a-contacts" href="#/home/contacts">Contacts</a>
        </li>
        <li class="tab">
          <a id="tabs-a-notes" data-automation-id="tabs-a-notes" href="#/home/notes">Notes</a>
        </li>
      </ul>
    </div>
    <div class="tab-panel-container">
      <div id="#/home/contracts" data-automation-id="tabs-panel-contracts" class="tab-panel">
        <p>Facilitate cultivate monetize, seize e-services peer-to-peer content integrateAJAX-enabled user-centric strategize. Mindshare; repurpose integrate global addelivery leading-edge frictionless, harness real-time plug-and-play standards-compliant 24/7 enterprise strategize robust infomediaries: functionalities back-end. Killer disintermediate web-enabled ubiquitous empower relationships, solutions, metrics architectures.</p>

        <div class="field">
          <label for="input-one">Input One</label>
          <input type="text" id="input-one" name="input-one"/>
        </div>
      </div>
      <div id="#/home/opportunities" data-automation-id="tabs-panel-opportunities" class="tab-panel">
        <p>Bricks-and-clicks? Evolve ubiquitous matrix B2B 24/365 vertical 24/365 platforms standards-compliant global leverage dynamic 24/365 intuitive ROI seamless rss-capable. Cutting-edge grow morph web services leverage; ROI, unleash reinvent innovative podcasts citizen-media networking.</p>
        <br/><br/>
        <div class="field">
          <label for="test-trackdirty">Dirty Tracking</label>
          <input type="text" placeholder="Dirty Tracking" data-trackdirty="true" id="test-trackdirty" name="test-trackdirty"/>
        </div>
      </div>
      <div id="#/home/attachments" data-automation-id="tabs-panel-attachments" class="tab-panel">
        <p>Frictionless webservices, killer open-source innovate, best-of-breed, whiteboard interactive back-end optimize capture dynamic front-end. Initiatives ubiquitous 24/7 enhance channels B2B drive frictionless web-readiness generate recontextualize widgets applications. Sexy sticky matrix, user-centred, rich user-centric: peer-to-peer podcasting networking addelivery optimize streamline integrated proactive: granular morph.</p>

        <div class="field">
          <label for="input-two">Input One</label>
          <input type="text" id="input-two" name="input-two"/>
        </div>
      </div>
      <div id="#/home/contacts" data-automation-id="tabs-panel-contacts" class="tab-panel top-padding">
        <p>Bricks-and-clicks? Evolve ubiquitous matrix B2B 24/365 vertical 24/365 platforms standards-compliant global leverage dynamic 24/365 intuitive ROI seamless rss-capable. Cutting-edge grow morph web services leverage; ROI, unleash reinvent innovative podcasts citizen-media networking.</p>

        <div class="field">
          <label for="input-three">Input One</label>
          <input type="text" id="input-three" name="input-three"/>
        </div>
      </div>
      <div id="#/home/notes" data-automation-id="tabs-panel-notes" class="tab-panel">
        <p>Post incentivize; rich-clientAPIs customized revolutionize 24/365 killer incentivize integrate intuitive utilize!</p>

        <div class="field">
          <label for="input-four">Input One</label>
          <input type="text" id="input-four" name="input-four"/>
        </div>
      </div>
    </div>

  </div>
</div>

Will have to table this for now in interest of time/priorities

[tmcconechy]

Talked to @deep7102 and we figured out a solid way 👍🏻

[janahintal]

QA Passed. Verified in https://main-enterprise.demo.design.infor.com/components/tabs/test-forward-slashes.html#/home/contracts