Skip to content

React modal incorrectly restores input focus on unmount (React 16) #675

Open
@denich

Description

@denich

Summary:

When conditional render is used - react modal restores focus on unmount without triggering onFocus event handler on target input.

Steps to reproduce:

  1. Add <Modal />
  2. Focus some input
  3. Mount/unmount the modal
  4. Focus restored w/o triggering onFocus event handler on the input

Expected behavior:

Input's onFocus event handler is triggered on focus restore.

Link to example of issue:

React16 and v3: https://codesandbox.io/s/6y6nx2np4k

Additional notes:

  • It works in case of using isOpen attribute instead of conditional rendering
  • It works with v2 and React15 in case closeTimeoutMS is set (I think v3 don't respect closeTimeoutMS on unmount anymore #530 issue prevents using this workaround)
  • It works in case restore focus in timeout

In case of using for example draft-js as an input, this bug becomes a cause of the really strange behavior after focus restore.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions