Eui: EuiCollapsibleNav isDocked state does not work with manual toggle isOpen

Created on 12 Apr 2020  路  7Comments  路  Source: elastic/eui

I was trying to achieve manual toggle using isOpen with isDocked as the default behaviour for open state <EuiCollapsibleNav isOpen{visible} isDocked={visible} hideButtonIfDocked={false} > but if I toggle the Nav to close state and reduce the window size small enough (<992) and try to open the Nav again, the overlay is not display and unable to close the Nav. Just roughly read the code, it seems the windowIsLargeEnoughToDock might not set properly due to the removal to window listener when the isDocked is set to false earlier

bug

All 7 comments

Do you have a codesandbox or an example gist we can take a look at for this particular configuration?

@cchaos Here is the codesandbox link: EuiCollapsibleNav_ManualToggleDemo

Steps to replicate the issue:

  1. Click the toggle button to close the EuiCollapsibleNav
  2. Reduce the window size (> 992px)
  3. Click the toggle button again
  4. Unable to close the EuiCollapsibleNav with the close empty button and no overlay mask shown

**Sorry there is some icon assets import issue.

I'm understanding your configuration now. You are forcing the collapsible nav flyout to always push the body contents (always docked) when toggling it to visible. In other words, your nav will always be docked unless its forced to mobile overlay. I have found the problem area and will have a PR soon. I will also look into allowing the customization of that breakpoint.

@cchaos Thank you so much, I could try to help out for the breakpoint feature if you need

@TAYTS Pr is here: #3330 If you want to take a look

@cchaos That's really fast, I can't thank you enough for the updates

You're very welcome. If you find any more bugs just let us know, or if you feel comfortable, pass us a PR!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

johnbarrierwilson picture johnbarrierwilson  路  3Comments

chandlerprall picture chandlerprall  路  3Comments

cahna picture cahna  路  3Comments

cchaos picture cchaos  路  3Comments

flash1293 picture flash1293  路  3Comments