Focus on the input element is lost when trying to scroll modal content by dragging scrollbar

[pavelkeyzik]

Summary:

Hi! I've noticed the issue with focus behavior when scrolling using the scrollbar. By default, the focus is not lost when I scroll with the scrollbar but when I use the same input in the modal, it loses focus. See attachment below.

CleanShot.2023-03-31.at.10.21.12.mp4

Steps to reproduce:

1. Add input inside the modal and add some content, so the modal is scrollable
2. Focus on the input
3. Scroll by dragging scrollbar

Expected behavior:

Focus on input is not lost

Link to example of issue:

Link to the example https://codepen.io/pavelkeyzik/pen/MWqdZdJ

Additional notes:

I feel like it's because of the tab-index="-1" attribute of .ReactModal__Content element, after removing this attribute it does work properly, but I'm not sure what's the replacement will be 🤔