When modal opened , click the scroll will make any control lose focus.

Open
#5,518 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
bootstrap, react, typescript
Domain
frontend

Research direction

Start with the linked CodeSandbox reproduction and compare focus behavior before and after opening the modal in Firefox and Chrome. Trace the modal and input focus handling in the relevant React-Bootstrap components. Done means clicking the scrollbar while the modal input is focused no longer causes that input to lose focus, while the existing reproduction steps still work.

Written by the indexing model from the issue text.

Description

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. goto the example page.
  2. click the inputbox on page.
  3. click the scrollbar, the inputbox doesn't lose focus.
  4. click show modal button.
  5. click the inputbox in the modal.
  6. click the scrollbar, the inpubox lose the focus.

Reproducible Example

https://codesandbox.io/s/hidden-cherry-j9ck1?file=/src/App.js

Expected behavior

The input box not lose the focus in step 6.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment (please complete the following information)

  • Operating System: window
  • Browser, Version : firefox 82, chrome 86
  • React-Bootstrap Version : see the example

Additional context

Dominant language
TypeScript
Stars
22.6k
Forks
3.6k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-bootstrap/react-bootstrap

All issues in react-bootstrap/react-bootstrap

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.