React autofocus input after enabling a disabled input

Viewed 6119

I'm trying to autofocus a text input (the input is enabled upon selecting a relevant radio option).

The autofocus works when toggling between options that will enable the text input. However, autofocus fails when switching from an option that disables the text input to an option that enables the text input.

  • In the sample link below:

    • option 1, option 2: disable the text input
    • option 3, option 4: enable the text input
  • Failure case:

    • option 1 is default
    • choose option 3 or option 4
    • input gets enabled
    • autofocus fails (looking for pointer to fix this behaviour)
  • Success case:

    • choose option 3
    • input is enabled
    • switch to option 4
    • input is autoFocussed

sample code for the problem on codesandbox

2 Answers
Related