The 'blur' event fires when the input element with 'autoFocus' set to 'true' is wrapped with 'OverlayScrollbars'. about overlayscrollbars HOT 17 CLOSED

@KingSora, good day :)

I'll provide you with an example of the actual case shortly.

from overlayscrollbars.

@thalaz I've created an workaround example: https://stackblitz.com/edit/bug-report-9d6408-usage-example-hjz9u9?file=src%2FDialogExample%2FCustomDialogContent%2Findex.tsx

I believe I'll add something like this to the library as well.. But for now please use the workaround until I've decided how this issue should be handled

from overlayscrollbars.

@KingSora, thanks for a workaround.
It was working only on the first modal open, but I see that you updated the workaround and it seems like everything is fine now.

Waiting for the official fix :)

from overlayscrollbars.

@thalaz Thanks for the feedback :)

I've revisited the problem and noticed that the functionality is easier and more reliable to implement with a Plugin. Here is the code: https://stackblitz.com/edit/bug-report-9d6408-usage-example-strict-mode-7mb27t?devToolsHeight=33&file=src%2Findex.tsx

This should also work with StrictMode I believe

from overlayscrollbars.

@thalaz I'll probably add it to the library in the next version.. I'll let you know when its released :)

from overlayscrollbars.

@thalaz Thanks for the feedback! After revisiting the code which was supposed to fix the issue I've noticed that I'm only covering the focus and blur events directly, but forgot the focusin and focusout events.. I've updated the code and tests accordingly: ec9ca7c

I'll release a "fixed fixed" version soon-ish... Sorry for the mistake, for the time being please continue to use the workaround

from overlayscrollbars.

@thalaz I've published overlayscrollbars v2.6.0 which should now hopefully have the correct fix :)

from overlayscrollbars.

@thalaz Good day :)

This happens because OverlayScrollbars wraps your elements and thus causes the original element to lose focus (because its briefly removed / moved in the DOM). After the wrapping is done it re-focuses the originally focused element so the original state is restored.

May I ask what you're trying to achieve that this behavior is unwanted?

from overlayscrollbars.

@KingSora, here is an example.

On my project, we have a lot of modals.
They differ in content and size, and since users can have different devices with different dimensions, we wanted to add a custom scrollbar to improve the UX.

We use the MUI library for styling and react-hook-form library to handle forms.

As for the product requirements, we need to have an instant validation on the fields which is achieved with mode: 'all' in the example provided.
Also, I've extended the DialogContent as you may see in the CustomDialogContent component - the only scrollable area will be the actual content of the modal.
And we would like to have the first field auto-focused, which is also required in some/most of the cases.

In the example:

• pressing the "Open modal with OverlayScrollbars" button will show you the actual behaviour that I'm trying to fix
• pressing the "Open modal without OverlayScrollbars" button will show you the desired behaviour

from overlayscrollbars.

From your words, I also understand that it's the desired behaviour (so it's not a bug, but rather an improvement suggestion).

Any suggestions on how I can keep both the scrollbar and the auto-focus functionality and get rid of this behaviour?

from overlayscrollbars.

@KingSora, it doesn't work in the StrictMode though (I guess it's caused by the additional mount/unmount).

I have used HTML's dialog since MUI's dialog has it's own issue with the StrictMode (it loses the focus completely).

It's not a big deal for me, but just FYI.

from overlayscrollbars.

Thanks, @KingSora. That's a very good and tidy one. Plus will work for all usages "out of the box".

Tested in my project - works as well.

Should I consider this as a final solution and forget about this?
Or will this become a part of the overlayscrollbars package someday?

from overlayscrollbars.

Thanks a lot, @KingSora!

from overlayscrollbars.

@thalaz I've published overlayscrollbars v2.5.0 which includes a fix to this issue :) Please check it out and give feedback whether it makes the workaround unnecessary

from overlayscrollbars.

@KingSora, unfortunately, updating the library doesn't help 🙁 A workaround is still needed.

In this example, I have commented the OverlayScrollbars.plugin(blurPlugin); and StrictMode - behaviour is still reproducible in "Open modal with OverlayScrollbars" (red field when you open the modal)

Here is a simple example (without MUI, etc.): link (instant onBlur message in the Console).

Note: tested in StackBlitz examples and my project.

from overlayscrollbars.

Yes sure @KingSora, no problem at all 🙂

Please let me know when a fixed version is deployed, and I'll double-check it 🙂

from overlayscrollbars.

Hi @KingSora,

Thank you very much.

Tested on the previous examples and real project.

It is fixed now. 🎉

from overlayscrollbars.