Is there a best practices mechanism to set input focus to a Patternfly element?

What is the best way to set the focus to a Patternfly element?

I’m working through an example “To-Do” app from Redux in Action using Patternfly. A “New Task” Button will enable title and description TextInputs. I’d like the focus to be on the title when first displayed.

I started down the path of using a ref via createRef() and the React docs: I’m a little confused here because that page contradicts another React doc page: So the React docs say “Use refs” and “Don’t use refs”. :slight_smile:

The ref didn’t work anyway. In the componentDidUpdate() method, I’d log console.log("current=%o", this.titleInputRef.current); and it’s a ref to the Patternfly instance. The props.ref is undefined and aims to the special-props.html warning page.

So going from, I go brute force and use document.getElementById("title").focus(); in my componentDidUpdate() method. And that worked.

Is there a better way to set focus to a Patternfly element other than sidestepping Patternfly entirely and jumping to the DOM?


My ha-ha code:

I’m also not having success using a ref for a TextInput. Is this a known issue?