Carbon: Tabs does not respond to container resizing

Created on 19 Oct 2020  ·  4Comments  ·  Source: carbon-design-system/carbon

What package(s) are you using?

  • [ ] carbon-components
  • [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

If Tabs is placed in a container that supports resizing (e.g. a container with a resize: both css rule), the Tabs component does not respond to container resizing. Looking at the source, I see that it only responds to window-level resizing.

The fix would be to use a ResizeObserver, and attach it to the Tabs ref, e.g. via

const observer = new ResizeObserver(entries => {
   doResize(entries[0].contentRect.width, entries[0].contentRect.height)
})
observer.observe(theTabsDom)

Is this issue related to a specific component?

Tabs

What did you expect to happen? What happened instead? What would you like to
see changed?

<div style={{resize: 'both', overflow: 'auto'}}>
  <Tabs>...</Tabs>
</div>

What browser are you working in?

Electron 7, Firefox, Chrome, ...

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Kui

Steps to reproduce the issue

  1. Step one
  2. Step two
  3. Step three
  4. etc.

Please create a reduced test case in CodeSandbox

i'd love to create a sandbox, but your template seems to be broken.

Additional information

  • Screenshots or code
  • Notes
needs more research 🕵️‍♀️ help wanted 👐 waiting for maintainer response 💬 enhancement 💡

All 4 comments

thanks for the example. we won't be able to use ResizeObserver until we drop IE support and I'm not sure if we would want to polyfill it. There may be an existing solution by watching the resize event but I don't know if that's supported in React

I guess my suggestion would be that, by supporting all-but-IE, the IE support remains as it is today. I.e. we won't be degrading the IE experience, by fixing the bugs everywhere else.

yeah I can see that, may look into this further after some of the currently open Tabs issues have been resolved

Was this page helpful?
0 / 5 - 0 ratings