How to control Tab Selection

[daninus14]

Hi, from the docs I have the prop onSelectionChange which seems to just execute the provided function when there is a selection change: https://react-spectrum.adobe.com/react-aria/Tabs.html#controlled-selection

However, I would like to control if the selection occurs at all or not. I assumed by returning a boolean this would control the change, but it seems that is not the case.

My use case is that I want to have a modal warning the user that the changes to the form will be lost if he changes tab. The user can then cancel (no tab change) or proceed (tab selected should change). How would this be implemented?

Thanks,

[reidbarber]

You can implement this with controlled. The function you pass into onSelectionChange should just show the warning modal, then when "proceed" is pressed is when you actually update the selectedKey . Here's an example: https://codesandbox.io/p/sandbox/ancient-wind-mxxvzh?file=%2Fsrc%2FApp.js

[daninus14]

Thank you so much!

[daninus14]

For posterity I'm adding here the code you posted

import "./styles.css";
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  Modal,
  Dialog,
  Heading,
  Button,
} from "react-aria-components";
import { useState } from "react";

export default function App() {
  let [selectedKey, setSelectedKey] = useState("triassic");
  let [pendingSelectedKey, setPendingSelectedKey] = useState(null);
  let [isOpen, setIsOpen] = useState(false);

  let showWarning = (key) => {
    if (key !== selectedKey) {
      setIsOpen(true);
      setPendingSelectedKey(key);
    }
  };

  let proceed = () => {
    setIsOpen(false);
    setSelectedKey(pendingSelectedKey);
    setPendingSelectedKey(null);
  };

  let cancel = () => {
    setIsOpen(false);
    setPendingSelectedKey(null);
  };

  return (
    <div>
      <Tabs selectedKey={selectedKey} onSelectionChange={showWarning}>
        <TabList aria-label="Mesozoic time periods">
          <Tab id="triassic">Triassic</Tab>
          <Tab id="jurassic">Jurassic</Tab>
          <Tab id="cretaceous">Cretaceous</Tab>
        </TabList>
        <TabPanel id="triassic">
          The Triassic ranges roughly from 252 million to 201 million years ago,
          preceding the Jurassic Period.
        </TabPanel>
        <TabPanel id="jurassic">
          The Jurassic ranges from 200 million years to 145 million years ago.
        </TabPanel>
        <TabPanel id="cretaceous">
          The Cretaceous is the longest period of the Mesozoic, spanning from
          145 million to 66 million years ago.
        </TabPanel>
      </Tabs>
      <Modal isOpen={isOpen}>
        <Dialog>
          <Heading slot="title">Warning</Heading>
          <p>Are you sure you want to proceed to {pendingSelectedKey}?</p>
          <Button onPress={proceed} autoFocus>
            Proceed
          </Button>
          <Button onPress={cancel}>Cancel</Button>
        </Dialog>
      </Modal>
    </div>
  );
}