search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.34k stars 807 forks source link

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

Open pavelkeyzik opened 1 year ago

pavelkeyzik commented 1 year ago

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.

https://user-images.githubusercontent.com/17102399/229067028-228a2679-ef2c-4752-9043-ca7d9b64a116.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 🤔