How to set the 'selected' Tab of the TabStrip to the first tab in Form `onSubmit`

Question

How can I set the 'selected' Tab of the TabStrip to the first tab in Form onSubmit?

i.e. I need to call tabStrip.setSelected(0), but in React methodology I'm not sure how to get a reference to the tabStrip?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Field, Form, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';

import {
  TabStrip,
  TabStripSelectEventArguments,
  TabStripTab,
} from '@progress/kendo-react-layout';

const App = () => {
  const [selected, setSelected] = React.useState<number>(2);

  const handleSelect = (e: TabStripSelectEventArguments) => {
    setSelected(e.selected);
  };

  const handleSubmit = (dataItem) => {
    alert("Submit OK");
  };

return (
    <Form
      onSubmit={handleSubmit}
      render={(formRenderProps) => (
        <div>
          <TabStrip selected={selected} onSelect={handleSelect}>
            <TabStripTab title="Tab 1 Title">
              <p>Tab 1 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 2 Title">
              <p>Tab 2 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 3 Title">
              <p>Tab 3 Content</p>
            </TabStripTab>
          </TabStrip>

          <span style={{ padding: 10 }}>
            <Button type={'submit'} icon="save" onClick={handleSubmit}>
              Save
            </Button>
          </span>
        </div>
      )}
    ></Form>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

Working example here: https://stackblitz.com/edit/react-mamtrq-6oshyg?file=app%2Fmain.tsx

Answer 1

The Form component from @progress/kendo-react-form (seen here)is handling the form submission in a particular way, and directly calling the submit method on the form element is not triggering the onSubmit prop.

If the underlying goal is to set the selected tab to the first one on form submission, we can achieve the desired behavior without the need to interact with the TabStrip component directly. We can control the selected tab by managing the state of the selected variable.

If a direct reference to the TabStrip is required for other purposes, you would typically use the useRef hook and the ref attribute. However, this is generally not needed when you can control the component through props and state, as we can do here.

const App = () => {
    const [selected, setSelected] = React.useState<number>(2);

    const handleSelect = (e: TabStripSelectEventArguments) => {
        setSelected(e.selected);
        console.log("handleSelect called", e.selected);
    };

    const handleSubmit = () => {
        setSelected(0); // Set the selected tab to the first one
        console.log("handleSubmit called");
        alert("Submit OK");
    };

    const handleButtonClick = () => {
        console.log("handleButtonClick called");
        handleSubmit(); // Call handleSubmit directly
    };

    return (
        <div>
            <TabStrip selected={selected} onSelect={handleSelect}>
                <TabStripTab title="Tab 1 Title">
                    <p>Tab 1 Content</p>
                </TabStripTab>
                <TabStripTab title="Tab 2 Title">
                    <p>Tab 2 Content</p>
                </TabStripTab>
                <TabStripTab title="Tab 3 Title">
                    <p>Tab 3 Content</p>
                </TabStripTab>
            </TabStrip>
            <span style={{ padding: 10 }}>
                <Button type={'button'} icon="save" onClick={handleButtonClick}>
                    Save
                </Button>
            </span>
        </div>
    );
};

const root = document.querySelector('my-app');
if (root) {
  createRoot(root).render(<App />);
}

We are directly calling the handleSubmit function from the handleButtonClick function, bypassing the form submission process. That approach make sures that the selected tab is set to the first one when the "Save" button is clicked.

stackblitz demo.

---

If you want a fully native @progress/kendo-react-form option:

const App = () => {
  const [selected, setSelected] = React.useState<number>(2);

  const handleSelect = (e: TabStripSelectEventArguments) => {
    setSelected(e.selected);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent the default form submission behavior
    setSelected(0); // Set the selected tab to the first one
    alert("Submit OK");
  };

  return (
    <form onSubmit={handleSubmit}> {/* Handle form submission with native form */}
      <TabStrip selected={selected} onSelect={handleSelect}>
        <TabStripTab title="Tab 1 Title">
          <p>Tab 1 Content</p>
        </TabStripTab>
        <TabStripTab title="Tab 2 Title">
          <p>Tab 2 Content</p>
        </TabStripTab>
        <TabStripTab title="Tab 3 Title">
          <p>Tab 3 Content</p>
        </TabStripTab>
      </TabStrip>
      <div className="k-form-buttons">
        <button type={"submit"} className="k-button k-primary">
          Save
        </button>
      </div>
    </form>
  );
};

const root = document.querySelector('my-app');
if (root) {
  createRoot(root).render(<App />);
}

stackblitz demo 2.