Update state on react not getting right value

Question

I have a dynamic navigation removable tabs using Fluent for react

I would like that when I close a tab ( for example test3) , the focus gets on the last tab in the nav bar like bellow

my actual problem is that when I close a tab , I loose the focus.

Here's my code

import React from "react";
import { Button, Menu, tabListBehavior } from "@fluentui/react-northstar";
import { CloseIcon } from "@fluentui/react-icons-northstar";
class MenuExampleTabShorthand extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0
    };
  }
  items = [
    {
      key: "editorials",
      content: (
        <div>
          "test"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={() => this.closeClick("editorials")}
          />
        </div>
      )
    },
    {
      key: "review",
      content: (
        <div>
          "test2"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={() => this.closeClick("review")}
          />
        </div>
      )
    },
    {
      key: "events",
      content: (
        <div>
          "test3"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={() => this.closeClick("events")}
          />
        </div>
      )
    }
  ];
  closeClick = task => {
    this.setState(function(prev, props) { // Im setting the selectedIndex to 0 
      return { ...prev, selectedIndex:0 };
    });
    this.items = this.items.filter(elm => elm.key !== task);

  };
  render() {
    return (
      <Menu
        activeIndex={this.state.selectedIndex}
        onActiveIndexChange={(i, j) => {
          this.setState(function(prev, props) {
            return { ...prev, selectedIndex: j.activeIndex };
          });
        }}
        items={this.items}
        underlined
        primary
        accessibility={tabListBehavior}
        aria-label="Today's events"
      />
    );
  }
}

export default MenuExampleTabShorthand; 

Here's a reproduction of error demo

Answer 1

The issue you are facing is caused by event propagation, you can fix it by adding e.stopPropagation(); in close click event handler, and not having it will cause the active item click handler to fire and then set the current active item to the one removed (codesandbox), note that I'm passing the event object to closeClick:

import React from "react";
import { Button, Menu, tabListBehavior } from "@fluentui/react-northstar";
import { CloseIcon } from "@fluentui/react-icons-northstar";

class MenuExampleTabShorthand extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0
    };
  }
  items = [
    {
      key: "editorials",
      content: (
        <div>
          "test"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={e => this.closeClick("editorials", e)}
          />
        </div>
      )
    },
    {
      key: "review",
      content: (
        <div>
          "test2"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={e => this.closeClick("review", e)}
          />
        </div>
      )
    },
    {
      key: "events",
      content: (
        <div>
          "test3"
          <Button
            icon={<CloseIcon />}
            text
            iconOnly
            title="Close"
            onClick={e => this.closeClick("events", e)}
          />
        </div>
      )
    }
  ];
  closeClick = (task, e) => {
    e.stopPropagation();
    this.setState(function(prev, props) {
      return { ...prev, selectedIndex: 0 };
    });
    console.log(this.items);
    this.items = this.items.filter(elm => elm.key !== task);
    console.log(this.items);
  };
  render() {
    return (
      <Menu
        activeIndex={this.state.selectedIndex}
        onActiveIndexChange={(i, j) => {
          this.setState(function(prev, props) {
            return { ...prev, selectedIndex: j.activeIndex };
          });
        }}
        items={this.items}
        underlined
        primary
        accessibility={tabListBehavior}
        aria-label="Today's events"
      />
    );
  }
}

export default MenuExampleTabShorthand;