[graphiql] Editor contents not updated when switching tabs

[bakjos]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When multiple tabs are open when switching from different tabs, the contents are lost

After debugging the method setState inside changeTab is called twice

graphiql/packages/graphiql-react/src/editor/context.tsx

Line 392 in 5067429

setTabState(current => {

this is the code used to render the graphiql component

<GraphiQL
  fetcher={graphQLFetcher}
  query={query}
  onEditQuery={setQuery}
  storage={localStorage}
  plugins={[explorerPlugin]}
  shouldPersistHeaders={true}
/>

Expected Behavior

The tabs should keep the contents

Steps To Reproduce

No response

Module pattern

• graphiql-umd
• graphiql-esm
• graphiql-commonjs

Environment

- GraphiQL Version: 2.4.0
- OS: MaxOS 13.2.1
- Browser: Chrome 110
- Bundler: Webpack(reac-scripits)
- `react` Version: 18.2.0
- `graphql` Version: 16.3.0

Anything else?

No response

[gr-myles]

+1 I am experiencing issues with tabs as well. Anytime I switch between tabs it either copies over or erases the current state to the other tab. It makes using tabs completely broken