Cannot automatically focus TextInput within DialogExtension modal

[heyitstowler]

It seems that you cannot automatically focus a TextInput component within a DialogExtension modal.

Repro:

• Create a sidebar extension using create-contentful-extension and begin development

Using autoFocus prop

• In the generated DialogExtension component, add a TextInput component, passing the prop autoFocus
• When extension rebuilds, click the button that opens the dialog

Expected: TextInput automatically focuses, enabling typing immediately
Actual: TextInput does not focus, requiring a click to begin typing

Using inputRef and focusing in componentDidMount

• In the generated DialogExtension component, add a constructor:

 constructor() {
    super()
    this.input = React.createRef()
  }

• and a componentDidMount:

  componentDidMount(){
    this.input.current.focus()
  }

• In the Text input, pass this.input as the inputRef prop to the TextInput component

• When extension rebuilds, click the button that opens the dialog

Expected: TextInput automatically focuses, enabling typing immediately
Actual: TextInput does not focus, requiring a click to begin typing

You can confirm refs are passing correctly by adding a Button component with the following onClick prop:
() => this.input.current.focus()
Expected: On click, input gains focus
Actual: On click, input gains focus

[wichniowski]

Hey, @heyitstowler thanks for bringing this up! It seems like some other element is taking away the focus after this component is mounted. I'll look into this and let you know as soon as this is fixed!

[suevalov]

Closing due to inactivity.