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: https://reactjs.org/docs/refs-and-the-dom.html I’m a little confused here because that page contradicts another React doc page: https://reactjs.org/warnings/special-props.html 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 https://www.w3schools.com/jsref/met_html_focus.asp, 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?

Thanks!

My ha-ha code: https://github.com/linuxlizard/parsnip

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