Skip to content

[Feature]: Drawer v9 has no equivalent isHiddenOnDismiss prop from v8 #34957

@Weffe

Description

@Weffe

Component

Drawer

Package version

9.68.2

React version

18.3.1

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.68.2 
    @fluentui/react-icons: latest => 2.0.307 
    @types/react: ^17 => 17.0.87 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

Closing the drawer and re-opening it loses state because there is no prop to instruct the component when "closing" that it keeps the drawer rendered but visibly hidden

Expected Behavior

In Fluent 8, there is a isHiddenOnDismiss prop that the docs outline here. Here's the same repro but using this prop in v8

There is no equivalent for the new v9 Drawer. I primarily would like this so scroll position is preserved when the user re-opens the drawer.

Reproduction

https://stackblitz.com/edit/gf3g9juz

Steps to reproduce

  1. Go to linked repro
  2. Open the drawer
  3. Add some text the <input> and scroll the container down a bit
  4. Close the drawer
  5. Re-open the drawer and see the inputted text is gone and the scroll position is lost

An ugly workaround is to manually track scroll position in a parent component and when the drawer is re-opened, set the saved scroll position.

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions