CODEWITHSUNDEEP
reactjstypescriptfluent-ui
Saurav
Saurav

Reputation: 363

FluentUI Form Fields Resetting When Pivot Changes

I’m using Fluent UI to build a Pivot component with a form inside, with the goal of having multiple fields across different pivots, similar to the example in this image: tabbed form

However, I'm encountering an issue where the form fields get reset every time the pivot is changed. This is unexpected behavior, as I want the form fields to retain their values even when switching between tabs.

const {
  Fabric,
  Pivot,
  PivotItem,
  TextField,
  PrimaryButton,
  Stack
} = window.FluentUIReact;


const Demo = () => {  
  return (
    <Fabric>
     <form>
      <Pivot aria-label="Basic Pivot Example">
        <PivotItem headerText="My Files">
            <Stack tokens={{ childrenGap: 10 }}>
              <TextField label="Name" required />
              <TextField label="Email" type="email" required />
              <PrimaryButton text="Submit" onClick={() => alert('Form submitted!')} />
            </Stack>
        </PivotItem>
        <PivotItem headerText="Recent">
          Pivot #2
        </PivotItem>
        <PivotItem headerText="Shared with me">
          Pivot #3
        </PivotItem>
      </Pivot>
      </form>

    </Fabric>
  );
}

ReactDOM.render(<Demo />, document.getElementById('container'));

Tired to persist the form values to manage state using React's useState hook.

Upvotes: 0

Views: 19

Answers (0)

Related Questions