Tabs not wrapping within the given space

[thanmaic]

Hi @cmmartti A good library to use :)

I am facing any issue of tabs not wrapping within the given space, rather the tabs overflow and it shows 'show more icon' but even that doesn't work. Please check the screenshot shared below.

Could you please look into the issue and help with a fix or work around.

[cmmartti]

Hmm, it looks like it might be a CSS issue. Can you post the code? It's hard to diagnose the problem without seeing it.

[thanmaic]

I copied the "src/DynamicTabs" folder to my components folder and used it as below:

import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import { css } from "emotion";

import "./Main/Header/Components/ResponsiveTabs/styles.css";
import DynamicTabs from "./Main/Header/Components/ResponsiveTabs/DynamicTabs/index";
import { withAuth } from "@okta/okta-react";
import { applyThemeStyles } from "./Styles/JLLThemes";
import DeleteIcon from "@material-ui/icons/Delete";
import AddIcon from "@material-ui/icons/Add";

const styles = () => ({
  pageRoot: {
    height: "calc(100vh - 110px)",
    top: 118,
    position: "fixed",
    width: "100%",
    backgroundColor: "#EBECEC",
  },
  // gridContainer: {
  //   height: 48,
  //   background: "white",
  //   boxShadow: "0px 2px 6px #00000029",
  // },
  // pageContainer: {
  //   margin: "12px 15px 12px 15px",
  //   height: "calc(100% - 24px)",
  // },
  tableRoot: {
    backgroundColor: "white",
    marginTop: 10,
    marginBottom: 10,
  },
  pageRootCmpny360: {
    height: "100%",
    width: "100%",
    top: 118,
    backgroundColor: "#EBECEC",
  },
  selectedStyle: {
    padding: 10,
    cursor: "pointer",
    backgroundColor: "beige",
    textDecoration: "underline",
  },
  notSelectedStyle: {
    padding: 10,
    cursor: "pointer",
  },
});

function Link({ to, clickedItem, children }) {
  return (
    <p
      target="blank"
      className={css`
        padding: 0.5em 0.75em;
        display: block;
        text-decoration: none;
        color: black;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
          background-color: aliceblue;
        }
      `}
      href={to}
      onClick={clickedItem}
    >
      {children}
    </p>
  );
}

export class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      //   items: dummyData,
      items: [],
      selectedItem: 0,
    };
  }

  componentDidMount() {
      this.setState(
        {
          items: this.props.items,
        },
        () => console.log("items props", this.state.items)
      );
  }

  clickedItem = (i) => {
    console.log("i", i);
    const { items } = this.state;
    if (i >= 0) {
      console.log("came inside if of clickedItem");
      items.forEach((x) => (x.isSelected = false));

      const itemIndex = items.findIndex((x) => {
        if (x.key === i) x.isSelected = true;
      });

      this.setState({
        selectedItem: i,
        items: [...items],
      });
    }
  };

  handleDeleteClick = (i, e) => {
    e.stopPropagation();
    console.log("i delete", i);
    const { items } = this.state;
    if (i >= 0) {
      items.splice(i, 1);
      //   console.log("items before", items);
      //   console.log("items array_values", items.values(items));
      let z = 0;
      const newArray = [...items];
      newArray.forEach((x) => {
        x.key = z;
        z++;
      });
      console.log("newArray", newArray);
      this.setState({
        selectedItem: 0,
        items: [...newArray],
      });
    }
  };

  handleAddTab = () => {
    console.log("add tab");
    const { items } = this.state;
    const newTab = {
      key: items.length,
      name: "Test1",
      biography: "Some text 123",
      isSelected: false,
    };
    items.splice(items.length, 0, newTab);
    this.setState({
      items: [...items],
    });
  };

  render() {
    console.log("clickedItems", this.state.items);
    console.log("selectedItem index", this.state.selectedItem);
    const { classes } = this.props;
    return (
      <div style={{ width: "100%", marginTop: 100 }}>
        <h1
          className={css`
            padding: 0.25em 0.35em;
            margin: 0;
            font-size: 1.5em;
            background-color: saddlebrown;
            color: white;
          `}
        >
          Birds of Canada
        </h1>

        <DynamicTabs
          className={css`
            align-items: stretch;
            background: thistle;
          `}
        >
          {this.state.items.map((data, i) => {
            return (
              <div
                key={i}
                style={{
                  display: "flex",
                }}
                className={
                  this.state.selectedItem === i
                    ? classes.selectedStyle
                    : classes.notSelectedStyle
                }
                onClick={() => this.clickedItem(i)}
              >
                <p>{data.displayName}</p>
                <DeleteIcon
                  onClick={(e) => this.handleDeleteClick(i, e)}
                  style={{
                    color: "black",
                    cursor: "hand",
                    margin: "auto",
                  }}
                />
              </div>
            );
          })}
        </DynamicTabs>
        <div>
          {this.state.items[this.state.selectedItem] &&
          this.state.items[this.state.selectedItem].biography ? (
            <p>{this.state.items[this.state.selectedItem].biography}</p>
          ) : (
            <div />
          )}
          <div
            style={{
              display: "flex",
              width: "80px",
              backgroundColor: "orange",
              marginTop: "30px",
              cursor: "pointer",
            }}
            onClick={this.handleAddTab}
          >
            <p>Add tab</p>
            <AddIcon
              style={{
                color: "black",
                cursor: "hand",
                margin: "auto",
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}
const ForecastsStyles = applyThemeStyles(styles)(App);

export default withAuth(ForecastsStyles);

Also surprisingly in case I supply static data to it, it works only some times. But when I try to pass data from API it doesn’t at all, when I debug and see it is due to the some piece of code useLayoutEffect/useEffect not working properly in the DynamicTabs/index.js file.

Appreciate some help at the earliest. Thanks :)