text selection in modal broken since google chrome 80

Since version update 80 of chrome (chrome edge as well) the text selection is broken in a modal dialog when a focusable element is present. FYI it still works well in latest ie11 and Firefox though.

//"react": "16.12.0"
//"react-bootstrap": "0.33.0"
//"react-focus-lock": "2.2.1"

import React from 'react'
import { Modal } from 'react-bootstrap'
import FocusLock from 'react-focus-lock'

const ModalWrapper = props => {
  return (
    <Modal show={true}>
      <FocusLock persistentFocus={false}>
        <div>
          <div>FOO</div>
          <button>close</button>
        </div>
      </FocusLock>
    </Modal>
  )
}

[theKashey]

So, this is not focus-lock related bug, and I am not sure why it works in other browsers/browser versions.

• The Modal has a tabindex=-1, which makes it focusable, but not tabbable (which is absolutely correct). Once you are trying to “select a text” - you do click on a Modal, and thus focusing it.
• The Modal is outside of the FocusLock
• And the focus returned back.

“Selection” works only if focus is on the body, ie nothing else is “selectable” between “you” and the body.

How to fix

Put FocusLock outside of the Modal, or provide a ref to a Modal in shards prop (I’ve tried, look like Modal do not support ref)

[DonBras]

Thanks for the conclusion. I will try this out.