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”.
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?
My ha-ha code: https://github.com/linuxlizard/parsnip