Fix #2683: Overlays should close on browser scroll

[melloware]

###Defect Fixes Fix #2683: Overlays should close on browser scroll

@mertsincan there are two issues here.

1. it was passing targetRef instead of target to the useOverlayScrollListener

2. it is not handling browser scrolling for closing the overlay when the browser is scrolled. Here is what we do in PF...

if (scrollParent.is('body') || scrollParent.is('html') || scrollParent[0].nodeType === 9) { // nodeType 9 is for document element
    scrollParent = $(window);
}

Basically register the window as the scroll monitor if the parent is the document, body, or html nodes. This now closes the overlays properly whenever the browser is scrolled.

[mertsincan]

While this structure was being designed, document's scroll was also included in this structure. User feedback and in our tests were that closing the overlays when scrolling the document made them quite useless. So I will look for a different solution without including the document in it.

[melloware]

OK for now we should definitely at least fix the target: target, listener: event => { its pointed to targetRef which is incorrect.

[ghost]

Hello. I have implementation of Dropdown as below. Sorry but I cannot figure out based on You replies how to fix this bug <StyledDropdown name={luxmeds.${index}.luxmedType.package} value={luxmedType.package} options={luxmedPackages} onChange={handleChange} placeholder="Select a package" />

[melloware]

@marcinb1986 you can't until this patch is applied. This PR is still open and has not been applied yet.

[ghost]

@melloware thanks for reply. I was thinking to close the Dropdown once screen is scrolled. I see that below aria-expanded changes to true/false once window is opened/closed. I was thinking to write some logic which will return false once screen have been scrolled, but when I add to <Dropdown/> implementation aria-expanded as prop but I don't see any reaction in the app. Do You think it's possible to use somehow aria-expanded ?

[melloware]

Nope it needs to be fixed with my patch above in the core code.

[ghost]

Ok, clear. Last question and I don't bother You anymore. When fix will be uploaded ? It' asking becasue I need to estimate if ok for my project to wait for it or I shall search for another library. regards

[melloware]

It still in discussion by PrimeTek. This patch has been open since April so I can't give you a timetable if it will be implemented.

[melloware]

you in your Dialog you can always do <Dialog blockScroll ... and blockScroll will disable the browser scrollbar while the dialog is open.

[melloware]

Fix #3656

[SunshineyDay]

@melloware - Code style test failure in components/lib/utils/DomHandler.js; can you fix the issue so that maybe the PrimeReact guys will merge this PR?

[melloware]

Fixed

[artonio]

I'm looking forward for this fix!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)			May 23, 2023 0:46am

[melloware]

This ticket suggests this is the correct behavior and what Facebook does. Closes the overlay upon scrolling.

https://github.com/primefaces/primereact/issues/4223

[lagroms]

Any news for this feature ?

[melloware]

I have updated this PR to make it a configuration.

PrimeReact.hideOverlaysOnViewportChange = true;

Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the overlay follow the scroll. The default behavior will be to close the overlay if you are scrolling the outer window as you are no longer interacting with the component.