Snackbar autohide shows random duration about design-system

[oddvernes]

Hello!
I am unable to reproduce this issue. with the following code, it closes after 1 second
(tested in a create vite app with 0.40.1)

function SnackbarSample() {
    const [message, setMessage] = useState({ open: false, text: '' })

    return (
      <>
        <Button
          onClick={() => setMessage({ open: true, text: 'test' })}
        >
          Show snackbar for 1 second
        </Button>
        <Snackbar
          open={message.open}
          onClose={() => setMessage({ open: false, text: '' })}
          autoHideDuration={1000}
        >
          {message.text}
        </Snackbar>
      </>
    )
}

So there must be some missing piece to this puzzle, with how it is implemented perhaps?

[ThomasRyschawyEquinor]

I found the missing piece to this puzzle, it's an interval.
In the below example the Snackbar does not autohide at all when the button is clicked.

import { useEffect, useState } from 'react'
import {
  Button,
  Snackbar,
} from '@equinor/eds-core-react';
import './App.css'

function App() {
  const [message, setMessage] = useState({ open: false, text: '' });
  const [data, setData] = useState(0);

  const handleClick = () => {
    setMessage({ open: true, text: 'Hello, World!' });
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setData(data => data + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <div>
        <Button onClick={() => handleClick()}>
          Show Snackbar + {data}
        </Button>
        <Snackbar
          open={message.open}
          onClose={() => setMessage({ open: false, text: '' })}
          autoHideDuration={2000}
        >
          {message.text}
        </Snackbar>
      </div>
    </>
  )
}

export default App

[ThomasRyschawyEquinor]

I found another way to trigger the issue using a second button.
Steps:
-press first button (Snackbar will show)
-press second button every second

Result:
As long as you (continuously) press the second button the Snackbar will stay open

It looks like each render resets the Snackbar timeout

Code:

import { useState } from 'react'
import {
  Button,
  Snackbar,
} from '@equinor/eds-core-react';
import './App.css'

function App() {
  const [message, setMessage] = useState({ open: false, text: '' });
  const [data, setData] = useState(0);

  const handleClick = () => {
    setMessage({ open: true, text: 'Hello, World!' });
  };

  const handleDataClick = () => {
    setData(data + 1);
  };

  return (
    <>
      <div>
        <Button onClick={() => handleClick()}>
          Show Snackbar
        </Button>
        <Button style={{marginLeft: '10px'}} onClick={() => handleDataClick()}>
          Data + {data}
        </Button>
      </div>
      <div>
        <Snackbar
          open={message.open}
          onClose={() => setMessage({ open: false, text: '' })}
          autoHideDuration={2000}
        >
          {message.text}
        </Snackbar>
      </div>
    </>
  )
}

export default App

[oddvernes]

Aha... sounds like something needs to be memiozed properly

[oddvernes]

Looks like removing the onClose function from the useEffect dependency array fixed it. I'll make a patch release with this fix 👍