Skip to content

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

Open

Description

@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 🤔

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions