[Tabs] TabPanel doesn't allow click through

[M1dnight-ofcl]

Bug report

Repro: https://codesandbox.io/p/sandbox/gracious-monad-lkn2s3

Current behavior

My app uses the tab components like this:

(That tab bar is on the side and the panels are the focus point)

Expected behavior

When I switched to a tab before the latest tab, interaction would not work.

Reproducible example

Code:

    <motion.div id="AppWrapper" className="default_dark">
      <Tabs.Root className="Tabs" defaultValue="home">
        <Tabs.List className="List">
          <Tabs.Tab className="Tab" value="home"><FontAwesomeIcon icon={faHome} /></Tabs.Tab>
          <Tabs.Tab className="Tab" value="settings"><FontAwesomeIcon icon={faGear} /></Tabs.Tab>
          <Tabs.Indicator className="Indicator" />
        </Tabs.List>
        <Tabs.Panel className="Panel" value="home">
          <Home />
        </Tabs.Panel>
        <Tabs.Panel className="Panel" value="settings">
          
        </Tabs.Panel>
      </Tabs.Root>
    </motion.div>

#AppWrapper {
  height: 100dvh;
  width: 100dvw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: theme.$bg1;
}
.Tabs {
  .List {
    display: flex;
    flex-direction: column;
    position: relative;
    // padding: .25rem;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 4.5rem;
    background: theme.$bg3;
    border-right: theme.$outline;
    .Tab {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      margin: 0;
      outline: 0;
      background: none;
      appearance: none;
      font-family: theme.$font;
      color: theme.$disabled;
      font-family: inherit;
      font-size: 2rem;
      height: 4.5rem;
      aspect-ratio: 1 / 1;
      user-select: none;
      transition: .35s;
      &[data-selected] {
        color: theme.$h1;
      }
      &:hover {
        color: theme.$active;
        background: theme.$outline-clr;
      }
    }
    .Indicator {
      position: absolute;
      z-index: -1;
      // left: 50%;
      left: 0;
      // top: .5rem;
      translate: /* -50% */ 0 calc(var(--active-tab-top));
      width: 5px;
      z-index: 99;
      height: 4.5rem;
      // border-radius: theme.$border-rad;
      background: theme.$active;
      transition-property: translate, width, background, border-radius;
      transition-duration: 200ms;
      box-sizing: border-box;
      transition-timing-function: ease-in-out;
    }
  }
  .Panel {
    position: fixed;
    top: 0%;
    left: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    width: calc(100dvw - 4.5rem);
    outline: 0;
    font-family: theme.$font !important;
  }
}

Base UI version

1.0.0-alpha.6

Which browser are you using?

Microsoft Webview2 (in wails)

Which OS are you using?

Windows 11

Additional context

I do have a workaround for this issue. I appended this to my stylesheet:

div[data-hidden], div[hidden] {
  pointer-events: none !important;
}

[mj12albert]

@M1dnight-ofcl Would you mind providing a repro? You can fork this sandbox: https://codesandbox.io/p/sandbox/gzrqk5

[M1dnight-ofcl]

I'll see if I could do one later

[M1dnight-ofcl]

Alr I've made a repro: https://codesandbox.io/p/sandbox/gracious-monad-lkn2s3

[mj12albert]

@M1dnight-ofcl I think this isn't a bug in the library, it may be caused by something in your CSS, maybe user-select: none?

It works using the docs styles: https://codesandbox.io/p/sandbox/quirky-platform-xm6zx2?file=%2Fsrc%2FApp.tsx%3A17%2C24

[M1dnight-ofcl]

The thing, it doesn't make sense as when I apply my fix it works again. It's a problem with the tab overtop not setting itself to be able to be clicked through when hidden. This may be a problem with my own implementation, but iy also mat be a problem with the library itself

[mj12albert]

@M1dnight-ofcl In your sandbox, the inactive Panel still has position: fixed and it comes after the active (first) Panel in the DOM so it's blocking the first panel from receiving any events ~ that's why pointer-events: none works

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Base UI please check out https://base-ui.com/react/overview/about#community.

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.