Approach to prevent a tab change (sl-tab-group)

[blendtwenty]

If I had to pick a favourite shoelace element, sl-tab-group is mine.

However, I have a use case which I don't think I can achieve with sl-tab-group. I'm looking for a way to intercept a tab change and prevent it from occurring. If anyone has some suggestions, that'd be appreciated.

Why? I hope to use this to provide a courtesy prompt to users to confirm the tab change in sensitive situations where state can be lost (be that unsaved edits, video calls, socket connections whatever..)

Here's a contrived example. Imagine a tab group.

|-----------------------|
|   Info   |  *Editor*  |
|---------------------------------|
|                                 |
|                                 |
|         <Complex Form>          |
|                                 |
|                                 |
|---------------------------------|

The editor tab is active and the user is filling out a complex form.

Ordinarily, the user clicks a different tab and the tab changes but in this situation, the user has some uncommitted edits to the form and changing tabs would discard those. I'd like to swoop in and prompt the user whether they would like to leave (discarding changes) or stay (continue editing).

|----------------------|
|  Are you sure?       |
|  [Leave]             |
|  [Continue Editing]  |
|----------------------|

Does any one know of a way I could intercept and prevent a tab change?

I see an sl-tab-show event is fired on tab change but this is after the fact.
I can use the show() method to force the display of a particular tab which I would use within the confirmation prompt actions.

The missing ingredient is being able to prevent a tab change.

[blendtwenty]

Yippee. Achieved. Very straight forward and embarrassed I didn't consider it before posting my question. Doh.

1. Add a handler to the sl-tab click event; and
2. event.stopPropagation();

class PromptingTabPanel extends LitElement {
  render() {
    return html`
      <sl-tab-group>
        <sl-tab slot="nav" @click=${this.handleClick} panel="about">About</sl-tab>
        <sl-tab slot="nav" panel="editor">Editor</sl-tab>

        <sl-tab-panel name="about">This is the about tab panel.</sl-tab-panel>
        <sl-tab-panel name="editor">This is the editor tab panel.</sl-tab-panel>
      </sl-tab-group>
    `;
  }
  handleClick(event) {
    event.stopPropagation();
    if (window.confirm("Do you really want to leave?")) {
      this.shadowRoot.querySelector('sl-tab-group').show(event.target.panel);
    }
  }
}