fix: fullscreen mode is reset, when new API request has been sent within the fullscreen

[merthelva]

Hi all 👋 I have encountered with a problem, while injecting your package into my company project. The problem can be observed in the first attached video. Actually, if there is no state update in my component, your package's interface works perfectly well as can be seen in the second attached video, i.e., either using exit-full-screen button or pressing Esc key when in full screen mode do the job. However, changing date for example forces full screen mode to be exited, which is undesirable for my application. I want the full screen mode to be kept in active even if state update occurs. Below, you can see the code snippets where and how I used your package interface within my component file:

// STEP I: import required hook and wrapper component
import { FullScreen, useFullScreenHandle } from 'react-full-screen'
...

// STEP II: extract "handle" variable out of the hook
const handle = useFullScreenHandle()
...

// STEP III: make API call to the service using RTK Query
const {
    data,
    isLoading: dataLoading,
    isFetching: dataFetching,
  } = service(
    {
      assetId: Number(assetId),
      from: watchDate && watchDate[0],
      to: watchDate && watchDate[1],
      clientId,
    },
    { skip: shouldSkip },
  )
...

// STEP IV: define handler function which will be triggered, when pressing either `full-screen` or `exit-full-screen` button
const handleToggleChartViewState = useCallback(() => {
    if (!handle.active) {
      handle.enter()
    } else {
      handle.exit()
    }
  }, [handle.active])
...

// STEP V: wrap required slice of UI component with `FullScreen` component and pass `handle` to it as `handle={handle}`
<FullScreenStyled handle={handle} $isFullScreenActive={handle.active}>
    {children}
</FullScreenStyled>
// where `FullScreenStyled` is a styled component which is styled based on `FullScreen` component that your package provides
...

// STEP VI: pass above handler function to Button component to control exiting and/or entering from/to full screen mode
<Button
    icon={{
        icon: handle.active ? 'exit-full-screen' : 'full-screen',
        size: 14,
        color: 'darkblue900',
    }}
    onClick={handleToggleChartViewState}
    variant="text"
 />

I am using react-hook-form to control my form inputs' behavior and in this component, my DateRangeSelector component is wrapped with Controller component, which is provided by react-hook-form package. DateRangeSelector in this context is the component that you can select Start and End dates for displaying the graph content. When changing Start and/or End date(s), API call in STEP III will be resent to the service.

I hope I can state my problem as much as possible and it will be clear for you guys. Still, in case of need for more detail, please contact me via my GitHub account.

[nagarjunayadavk]

Hi @merthelva I am facing similar issue could you please post the solution if you have already got.

Thanks @merthelva

[pomle]

My suggestion would be to ensure nothing is unmounted and remounted accidentally. That could happen if you for example have an element that uses something unstable as key prop. The React key prop that is.

Make sure your render tree is stable and report back if this issue still occurs.

See if you can reproduce it in CodeSandbox perhaps and send a link.