@instructure/ui-tabs 9.0.2-snapshot-11 → 9.0.2-snapshot-15

package/CHANGELOG.md

@@ -3,14 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-11) (2024-06-12)
+## [9.0.2-snapshot-15](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-15) (2024-06-13)
 
 
 ### Bug Fixes
 
+* **ui-tabs:** fix horizontal scrolling with keyboard navigation ([a25c7db](https://github.com/instructure/instructure-ui/commit/a25c7db1ebede622f489dd65872ed8fc5a1b9651))
 * **ui-tabs:** fix id generation when null is present as children ([85765ae](https://github.com/instructure/instructure-ui/commit/85765ae3183ac121714cd814a322dcc012ed2f72))
 
 
+### Features
+
+* **ui-tabs:** add option for persisting tabpanels ([6fe73a3](https://github.com/instructure/instructure-ui/commit/6fe73a3ec76c88fcc7baf2f587276de595316dbc))
+
+
 
 
 

package/es/Tabs/Panel/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active"];
+const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active", "unmountOnExit"];
 var _dec, _class, _Panel;
 /*
  * The MIT License (MIT)
@@ -55,40 +55,50 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      isHidden: this.isHidden
+    });
   }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      isHidden: this.isHidden
+    });
   }
-  render() {
+  get isHidden() {
     const _this$props3 = this.props,
-      labelledBy = _this$props3.labelledBy,
-      variant = _this$props3.variant,
-      id = _this$props3.id,
-      maxHeight = _this$props3.maxHeight,
-      minHeight = _this$props3.minHeight,
-      padding = _this$props3.padding,
-      textAlign = _this$props3.textAlign,
-      children = _this$props3.children,
-      elementRef = _this$props3.elementRef,
       isDisabled = _this$props3.isDisabled,
-      isSelected = _this$props3.isSelected,
-      styles = _this$props3.styles,
-      active = _this$props3.active,
-      props = _objectWithoutProperties(_this$props3, _excluded);
-    const isHidden = !isSelected || !!isDisabled;
+      isSelected = _this$props3.isSelected;
+    return !isSelected || !!isDisabled;
+  }
+  render() {
+    const _this$props4 = this.props,
+      labelledBy = _this$props4.labelledBy,
+      variant = _this$props4.variant,
+      id = _this$props4.id,
+      maxHeight = _this$props4.maxHeight,
+      minHeight = _this$props4.minHeight,
+      padding = _this$props4.padding,
+      textAlign = _this$props4.textAlign,
+      children = _this$props4.children,
+      elementRef = _this$props4.elementRef,
+      isDisabled = _this$props4.isDisabled,
+      isSelected = _this$props4.isSelected,
+      styles = _this$props4.styles,
+      active = _this$props4.active,
+      unmountOnExit = _this$props4.unmountOnExit,
+      props = _objectWithoutProperties(_this$props4, _excluded);
     return jsx("div", Object.assign({}, passthroughProps(props), {
       css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
-      "aria-hidden": isHidden ? 'true' : void 0,
+      "aria-hidden": this.isHidden ? 'true' : void 0,
       ref: this.handleRef
     }), jsx(Transition, {
       type: "fade",
-      in: !isHidden,
-      unmountOnExit: true,
+      in: !this.isHidden,
+      unmountOnExit: unmountOnExit,
       transitionExit: false
     }, jsx(View, {
       css: styles === null || styles === void 0 ? void 0 : styles.content,
@@ -105,7 +115,8 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   variant: 'default',
   isSelected: false,
   padding: 'small',
-  active: false
+  active: false,
+  unmountOnExit: true
 }, _Panel)) || _class);
 export default Panel;
 export { Panel };

package/es/Tabs/Panel/props.js

@@ -37,7 +37,8 @@ const propTypes = {
   padding: ThemeablePropTypes.spacing,
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
   elementRef: PropTypes.func,
-  active: PropTypes.bool
+  active: PropTypes.bool,
+  unmountOnExit: PropTypes.bool
 };
-const allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active'];
+const allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active', 'unmountOnExit'];
 export { propTypes, allowedProps };

package/es/Tabs/Panel/styles.js

@@ -32,9 +32,10 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, state) => {
   const maxHeight = props.maxHeight,
     isSelected = props.isSelected;
+  const isHidden = state.isHidden;
   return {
     panel: {
       label: 'panel',
@@ -48,6 +49,9 @@ const generateStyle = (componentTheme, props) => {
       ...(isSelected && {
         flexGrow: 1,
         height: '100%'
+      }),
+      ...(isHidden && {
+        display: 'none'
       })
     },
     content: {

package/es/Tabs/index.js

@@ -26,7 +26,7 @@ var _dec, _dec2, _class, _Tabs;
  */
 
 /** @jsx jsx */
-import React, { Component, createElement } from 'react';
+import React, { Component } from 'react';
 import keycode from 'keycode';
 import { View } from '@instructure/ui-view';
 import { matchComponentTypes, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
@@ -252,22 +252,26 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
         id
       });
     }
-    this.state.withTabListOverflow && this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`));
+
+    // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
+    // one "tick" later than the keypress
+    setTimeout(() => {
+      this.state.withTabListOverflow && this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`));
+    }, 0);
   }
   createTab(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId;
-    return /*#__PURE__*/createElement(Tab, {
+    return jsx(Tab, {
       variant: this.props.variant,
       key: `tab-${index}`,
       id: `tab-${id}`,
       controls: panel.props.id || `panel-${id}`,
-      index,
+      index: index,
       isSelected: selected,
       isDisabled: panel.props.isDisabled,
-      children: panel.props.renderTitle,
       onClick: this.handleTabClick,
       onKeyDown: this.handleTabKeyDown
-    });
+    }, panel.props.renderTitle);
   }
   clonePanel(index, generatedId, selected, panel, activePanel) {
     const id = panel.props.id || generatedId;

package/lib/Tabs/Panel/index.js

@@ -14,7 +14,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active"];
+const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active", "unmountOnExit"];
 var _dec, _class, _Panel;
 /*
  * The MIT License (MIT)
@@ -60,40 +60,50 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      isHidden: this.isHidden
+    });
   }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      isHidden: this.isHidden
+    });
   }
-  render() {
+  get isHidden() {
     const _this$props3 = this.props,
-      labelledBy = _this$props3.labelledBy,
-      variant = _this$props3.variant,
-      id = _this$props3.id,
-      maxHeight = _this$props3.maxHeight,
-      minHeight = _this$props3.minHeight,
-      padding = _this$props3.padding,
-      textAlign = _this$props3.textAlign,
-      children = _this$props3.children,
-      elementRef = _this$props3.elementRef,
       isDisabled = _this$props3.isDisabled,
-      isSelected = _this$props3.isSelected,
-      styles = _this$props3.styles,
-      active = _this$props3.active,
-      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const isHidden = !isSelected || !!isDisabled;
+      isSelected = _this$props3.isSelected;
+    return !isSelected || !!isDisabled;
+  }
+  render() {
+    const _this$props4 = this.props,
+      labelledBy = _this$props4.labelledBy,
+      variant = _this$props4.variant,
+      id = _this$props4.id,
+      maxHeight = _this$props4.maxHeight,
+      minHeight = _this$props4.minHeight,
+      padding = _this$props4.padding,
+      textAlign = _this$props4.textAlign,
+      children = _this$props4.children,
+      elementRef = _this$props4.elementRef,
+      isDisabled = _this$props4.isDisabled,
+      isSelected = _this$props4.isSelected,
+      styles = _this$props4.styles,
+      active = _this$props4.active,
+      unmountOnExit = _this$props4.unmountOnExit,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
-      "aria-hidden": isHidden ? 'true' : void 0,
+      "aria-hidden": this.isHidden ? 'true' : void 0,
       ref: this.handleRef
     }), (0, _emotion.jsx)(_Transition.Transition, {
       type: "fade",
-      in: !isHidden,
-      unmountOnExit: true,
+      in: !this.isHidden,
+      unmountOnExit: unmountOnExit,
       transitionExit: false
     }, (0, _emotion.jsx)(_View.View, {
       css: styles === null || styles === void 0 ? void 0 : styles.content,
@@ -110,6 +120,7 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   variant: 'default',
   isSelected: false,
   padding: 'small',
-  active: false
+  active: false,
+  unmountOnExit: true
 }, _Panel)) || _class);
 var _default = exports.default = Panel;

package/lib/Tabs/Panel/props.js

@@ -44,6 +44,7 @@ const propTypes = exports.propTypes = {
   padding: _emotion.ThemeablePropTypes.spacing,
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
   elementRef: _propTypes.default.func,
-  active: _propTypes.default.bool
+  active: _propTypes.default.bool,
+  unmountOnExit: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active'];
+const allowedProps = exports.allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active', 'unmountOnExit'];

package/lib/Tabs/Panel/styles.js

@@ -38,9 +38,10 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, state) => {
   const maxHeight = props.maxHeight,
     isSelected = props.isSelected;
+  const isHidden = state.isHidden;
   return {
     panel: {
       label: 'panel',
@@ -54,6 +55,9 @@ const generateStyle = (componentTheme, props) => {
       ...(isSelected && {
         flexGrow: 1,
         height: '100%'
+      }),
+      ...(isHidden && {
+        display: 'none'
       })
     },
     content: {

package/lib/Tabs/index.js

@@ -267,22 +267,26 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         id
       });
     }
-    this.state.withTabListOverflow && this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`));
+
+    // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
+    // one "tick" later than the keypress
+    setTimeout(() => {
+      this.state.withTabListOverflow && this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`));
+    }, 0);
   }
   createTab(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId;
-    return /*#__PURE__*/(0, _react.createElement)(_Tab.Tab, {
+    return (0, _emotion.jsx)(_Tab.Tab, {
       variant: this.props.variant,
       key: `tab-${index}`,
       id: `tab-${id}`,
       controls: panel.props.id || `panel-${id}`,
-      index,
+      index: index,
       isSelected: selected,
       isDisabled: panel.props.isDisabled,
-      children: panel.props.renderTitle,
       onClick: this.handleTabClick,
       onKeyDown: this.handleTabKeyDown
-    });
+    }, panel.props.renderTitle);
   }
   clonePanel(index, generatedId, selected, panel, activePanel) {
     const id = panel.props.id || generatedId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "9.0.2-snapshot-11",
+  "version": "9.0.2-snapshot-15",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.0.2-snapshot-11",
-    "@instructure/ui-color-utils": "9.0.2-snapshot-11",
-    "@instructure/ui-test-locator": "9.0.2-snapshot-11",
-    "@instructure/ui-test-utils": "9.0.2-snapshot-11",
-    "@instructure/ui-themes": "9.0.2-snapshot-11",
+    "@instructure/ui-babel-preset": "9.0.2-snapshot-15",
+    "@instructure/ui-color-utils": "9.0.2-snapshot-15",
+    "@instructure/ui-test-locator": "9.0.2-snapshot-15",
+    "@instructure/ui-test-utils": "9.0.2-snapshot-15",
+    "@instructure/ui-themes": "9.0.2-snapshot-15",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.0.2-snapshot-11",
-    "@instructure/debounce": "9.0.2-snapshot-11",
-    "@instructure/emotion": "9.0.2-snapshot-11",
-    "@instructure/shared-types": "9.0.2-snapshot-11",
-    "@instructure/ui-dom-utils": "9.0.2-snapshot-11",
-    "@instructure/ui-focusable": "9.0.2-snapshot-11",
-    "@instructure/ui-i18n": "9.0.2-snapshot-11",
-    "@instructure/ui-motion": "9.0.2-snapshot-11",
-    "@instructure/ui-prop-types": "9.0.2-snapshot-11",
-    "@instructure/ui-react-utils": "9.0.2-snapshot-11",
-    "@instructure/ui-testable": "9.0.2-snapshot-11",
-    "@instructure/ui-utils": "9.0.2-snapshot-11",
-    "@instructure/ui-view": "9.0.2-snapshot-11",
-    "@instructure/uid": "9.0.2-snapshot-11",
+    "@instructure/console": "9.0.2-snapshot-15",
+    "@instructure/debounce": "9.0.2-snapshot-15",
+    "@instructure/emotion": "9.0.2-snapshot-15",
+    "@instructure/shared-types": "9.0.2-snapshot-15",
+    "@instructure/ui-dom-utils": "9.0.2-snapshot-15",
+    "@instructure/ui-focusable": "9.0.2-snapshot-15",
+    "@instructure/ui-i18n": "9.0.2-snapshot-15",
+    "@instructure/ui-motion": "9.0.2-snapshot-15",
+    "@instructure/ui-prop-types": "9.0.2-snapshot-15",
+    "@instructure/ui-react-utils": "9.0.2-snapshot-15",
+    "@instructure/ui-testable": "9.0.2-snapshot-15",
+    "@instructure/ui-utils": "9.0.2-snapshot-15",
+    "@instructure/ui-view": "9.0.2-snapshot-15",
+    "@instructure/uid": "9.0.2-snapshot-15",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/Tabs/Panel/index.tsx

@@ -55,19 +55,25 @@ class Panel extends Component<TabsPanelProps> {
     variant: 'default',
     isSelected: false,
     padding: 'small',
-    active: false
+    active: false,
+    unmountOnExit: true
   }
 
   componentDidMount() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.({ isHidden: this.isHidden })
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.({ isHidden: this.isHidden })
   }
 
   ref: HTMLDivElement | null = null
 
+  get isHidden() {
+    const { isDisabled, isSelected } = this.props
+    return !isSelected || !!isDisabled
+  }
+
   handleRef = (el: HTMLDivElement | null) => {
     const { elementRef } = this.props
 
@@ -93,9 +99,9 @@ class Panel extends Component<TabsPanelProps> {
       isSelected,
       styles,
       active,
+      unmountOnExit,
       ...props
     } = this.props
-    const isHidden = !isSelected || !!isDisabled
 
     return (
       <div
@@ -104,13 +110,13 @@ class Panel extends Component<TabsPanelProps> {
         role="tabpanel"
         id={id}
         aria-labelledby={labelledBy}
-        aria-hidden={isHidden ? 'true' : undefined}
+        aria-hidden={this.isHidden ? 'true' : undefined}
         ref={this.handleRef}
       >
         <Transition
           type="fade"
-          in={!isHidden}
-          unmountOnExit
+          in={!this.isHidden}
+          unmountOnExit={unmountOnExit}
           transitionExit={false}
         >
           <View

package/src/Tabs/Panel/props.ts

@@ -63,6 +63,10 @@ type TabsPanelOwnProps = {
    * for all the `<Tabs.Panel />`s.
    */
   active?: boolean
+  /**
+   * When set to false, the tabPanel only will be hidden, but not dismounted when not active
+   */
+  unmountOnExit?: boolean
 }
 
 type PropKeys = keyof TabsPanelOwnProps
@@ -88,7 +92,8 @@ const propTypes: PropValidators<PropKeys> = {
   padding: ThemeablePropTypes.spacing,
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
   elementRef: PropTypes.func,
-  active: PropTypes.bool
+  active: PropTypes.bool,
+  unmountOnExit: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -104,7 +109,8 @@ const allowedProps: AllowedPropKeys = [
   'padding',
   'textAlign',
   'elementRef',
-  'active'
+  'active',
+  'unmountOnExit'
 ]
 
 export type { TabsPanelProps, TabsPanelStyle }

package/src/Tabs/Panel/styles.ts

@@ -37,9 +37,11 @@ import type { TabsPanelProps, TabsPanelStyle } from './props'
  */
 const generateStyle = (
   componentTheme: TabsPanelTheme,
-  props: TabsPanelProps
+  props: TabsPanelProps,
+  state: { isHidden: boolean }
 ): TabsPanelStyle => {
   const { maxHeight, isSelected } = props
+  const { isHidden } = state
 
   return {
     panel: {
@@ -54,6 +56,9 @@ const generateStyle = (
       ...(isSelected && {
         flexGrow: 1,
         height: '100%'
+      }),
+      ...(isHidden && {
+        display: 'none'
       })
     },
     content: {

package/src/Tabs/README.md

@@ -322,6 +322,79 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
+### Persisting the selected tab
+
+If you need to persist the rendered content of the tabpanels between tabbing, you can set the `unmountOnExit` prop to `false` on the `<Tabs.Panel>` component. It works case by case, so you can set it to `false` only on the tabpanels you want to persist.
+
+```js
+---
+type: example
+---
+class Counter extends React.Component{
+  state = {
+    counter: 0
+  }
+  handleIncrement = () => {
+    this.setState({
+      counter: this.state.counter + 1
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <Button onClick={this.handleIncrement}>Increment</Button>
+        <hr/>
+        <Text>{this.state.counter}</Text>
+      </div>
+    )
+  }
+}
+class Example extends React.Component {
+  state = {
+    selectedIndex: 0
+  }
+  handleTabChange = (event, { index, id }) => {
+    this.setState({
+      selectedIndex: index
+    })
+  }
+  render () {
+    const { selectedIndex } = this.state
+    return (
+      <Tabs
+        margin="large auto"
+        padding="medium"
+        onRequestTabChange={this.handleTabChange}
+      >
+        <Tabs.Panel
+          id="tabA"
+          renderTitle="I will persist"
+          textAlign="center"
+          padding="large"
+          isSelected={selectedIndex === 0}
+          unmountOnExit={false}
+        >
+          <Counter/>
+        </Tabs.Panel>
+        <Tabs.Panel id="tabB" renderTitle="I will unmount" isSelected={selectedIndex === 1}  textAlign="center"
+          padding="large">
+          <Counter/>
+        </Tabs.Panel>
+        <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
+         Tab C
+        </Tabs.Panel>
+        <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
+         Tab D
+        </Tabs.Panel>
+      </Tabs>
+    )
+  }
+}
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

package/src/Tabs/index.tsx

@@ -23,13 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, {
-  Component,
-  ComponentClass,
-  ComponentElement,
-  createElement,
-  ReactElement
-} from 'react'
+import React, { Component, ComponentElement, ReactElement } from 'react'
 
 import keycode from 'keycode'
 
@@ -329,8 +323,14 @@ class Tabs extends Component<TabsProps, TabsState> {
       this.props.onRequestTabChange(event, { index, id })
     }
 
-    this.state.withTabListOverflow &&
-      this.showActiveTabIfOverlayed(this._tabList!.querySelector(`#tab-${id}`))
+    // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
+    // one "tick" later than the keypress
+    setTimeout(() => {
+      this.state.withTabListOverflow &&
+        this.showActiveTabIfOverlayed(
+          this._tabList!.querySelector(`#tab-${id}`)
+        )
+    }, 0)
   }
 
   createTab(
@@ -341,18 +341,21 @@ class Tabs extends Component<TabsProps, TabsState> {
   ): TabChild {
     const id = panel.props.id || generatedId
 
-    return createElement(Tab as ComponentClass<TabsTabProps>, {
-      variant: this.props.variant,
-      key: `tab-${index}`,
-      id: `tab-${id}`,
-      controls: panel.props.id || `panel-${id}`,
-      index,
-      isSelected: selected,
-      isDisabled: panel.props.isDisabled,
-      children: panel.props.renderTitle,
-      onClick: this.handleTabClick,
-      onKeyDown: this.handleTabKeyDown
-    })
+    return (
+      <Tab
+        variant={this.props.variant}
+        key={`tab-${index}`}
+        id={`tab-${id}`}
+        controls={panel.props.id || `panel-${id}`}
+        index={index}
+        isSelected={selected}
+        isDisabled={panel.props.isDisabled}
+        onClick={this.handleTabClick}
+        onKeyDown={this.handleTabKeyDown}
+      >
+        {panel.props.renderTitle}
+      </Tab>
+    )
   }
 
   clonePanel(