Convert IdleSearchField to a function compontent / use hooks

[mstange]

IdleSearchField currently does not provide a way for parent components to focus the input. The current patch in #6025 uses a ref on a wrapper element and then gets at the input using wrapper.querySelector("input[type=search]") .

A cleaner solution would be to convert IdleSearchField to a function component and then use forwardRef, so that <IdleSearchField ref={searchfieldRef}/> gives the parent a ref to the input.

┆Issue is synchronized with this Jira Task

[stuticoder123]

Hi! I'd like to work on this issue. Could I be assigned? Opened a PR for this issue :

• Converted IdleSearchField to a function component
• Added forwardRef support
• Replaced lifecycle methods with hooks

All checks are passing now. Feedback is welcome!
Do let me know, am I suitable to join this organization?

[fatadel]

Hey @stuticoder123, thanks for your willingness to contribute to Firefox Profiler! Sure, I've assigned the task to you. Please, remember to refer to this issue from your PR. I don't think you need to be added to any org to be able to contribute.

[fatadel]

Make sure to get familiar with https://github.com/firefox-devtools/profiler/blob/main/CONTRIBUTING.md too.