search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.88k stars 1.82k forks source link

[Bug]: Overflow menu open prop issue #14229

Closed Kiranpatkar closed 1 year ago

Kiranpatkar commented 1 year ago

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

v1.21.0

React version

18.0.1

Description

When we use open prop for Overflow menu page is crashing

ERROR Cannot read properties of null (reading 'left') TypeError: Cannot read properties of null (reading 'left') at getFloatingPosition (http://localhost:3000/static/js/bundle.js:147103:39) at FloatingMenu._updateMenuSize (http://localhost:3000/static/js/bundle.js:147219:31) at http://localhost:3000/static/js/bundle.js:147265:15 at commitAttachRef (http://localhost:3000/static/js/bundle.js:237760:24) at commitLayoutEffectOnFiber (http://localhost:3000/static/js/bundle.js:237641:13) at commitLayoutMountEffects_complete (http://localhost:3000/static/js/bundle.js:238640:13) at commitLayoutEffects_begin (http://localhost:3000/static/js/bundle.js:238629:11) at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:238575:7) at commitRootImpl (http://localhost:3000/static/js/bundle.js:240485:9) at commitRoot (http://localhost:3000/static/js/bundle.js:240365:9)

Reproduction/example

<OverflowMenu size="lg" flipped renderIcon={Translate} data-floating-menu-container title={t('appSwitcher.languages')} open> {languages.map(lang => ( <OverflowMenuItem size="sm" className="switcher-image" itemText={ <> {lang.name} {lang.name} </> } onClick={() => { handleLanguageClick(lang.lang); }} key={lang.lang} /> ))}

Steps to reproduce

Add open prop to Overflow Menu component <OverflowMenu size="lg" flipped renderIcon={Translate} data-floating-menu-container title={t('appSwitcher.languages')} open> {languages.map(lang => ( <OverflowMenuItem size="sm" className="switcher-image" itemText={ <>

{lang.name} 
                                                {lang.name}
                                            </>
                                        }
                                        onClick={() => {
                                            handleLanguageClick(lang.lang);
                                        }}
                                        key={lang.lang}
                                    />
                                ))}
                            </OverflowMenu>

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

archive viewer

Code of Conduct

tay1orjones commented 1 year ago

@Kiranpatkar this seems to be working fine in the storybook https://react.carbondesignsystem.com/?path=/story/components-overflowmenu--playground&args=open:!true

Could you reproduce the issue in a stackblitz, and post the link back here? It's hard to know exactly what's going wrong without seeing the issue firsthand.

dabrad26 commented 1 year ago

I will add we came across this issue as one of our custom overflow items suddenly stopped closing itself after an item was clicked. We are investigating on our side and will also follow/update this ticket.

Product: IBM Aspera on Cloud

dabrad26 commented 1 year ago

Created a basic example. It is a bit weird. The first time it does not close. But future clicks do sometimes close as expected.

https://stackblitz.com/edit/github-vcj1b1-9tmbgc?file=src%2FApp.jsx

I will note I don't see this behavior on Safari only Chrome.

For our app we have similar experience of randomly closing as expected; but I have yet to lock down the logic. Like sometimes if I don't move my mouse it does work as expected after clicking an item...

Untitled

dabrad26 commented 1 year ago

As an update from our code. We did find that ours stopped working as we had:

<OverlfowMenu>
  <Theme g100>
    <OverflowMenuItem />
    <OverflowMenuItem />
  </Theme>
</OverflowMenu>

We had children in the dropdown that needed to be hardcoded to Dark theme. Because of this we used the Theme component. For now our solution is to change to menuOptionsClass="cds--g100'" to lock it without introducing a new div.

dabrad26 commented 1 year ago

I tested a bit more and with using onClose on controlled versions (using state to open). It works as expected. From my testing I think the component is working as expected.

Kiranpatkar commented 1 year ago

@tay1orjones I was using @carbon/react": "1.21.0" version I upgraded it to @carbon/react": "1.34.0" now open prop in Overflowmenu working as expected. Thank you for the response