Styling component on focus

[sonicka]

Hey there!

I'm trying to customize the look of your search bar and I'm stuck on one thing. I'm trying to give it a bottom border that changes color when search bar is focused. I have the bottom border showing, also managed to make it work on hover but it won't work when focused so I'm probably doing something wrong. This is what I tried:

I'm sending this to Search component:
classes={{ root: classes.searchRoot, input: classes.searchInput }}

And classes look like this:
(the commented out lines are my attempts to make it work --- sorry for them, I'm little bit confused about styling components like this so I tried anything I could think of that resembled anything I've read in some tutorials hoping something would work in the end but it didn't sooo here I am)

focused: {},
searchRoot: {
    borderBottom: "2px solid white", // this works
    borderRadius: 0,
    "&:hover": {   // this works
     borderBottom: "2px solid blue"
    }
    // "&$focused $searchInput": {
    //   borderBottom: "2px solid red"
    // },
    // "&$focused": {
    //   borderBottom: "2px solid red"
    // },
    // "$:focus": {
    //   borderBottom: "2px solid red"
    // },
    // "$:focus $searchRoot": {
    //   borderBottom: "2px solid red"
    // },
    // "&$focused $searchRoot": {
    //   borderBottom: "2px solid red"
    // }
    // "$:focus $searchRoot": {
    //   borderBottom: "2px solid red"
    // },
  },
  searchInput: {
    color: "white",
    // "&$focused": {
    //   borderBottom: "2px solid red"
    // }
    // "$:focus": {
    //   borderBottom: "2px solid red"
    // }
    // "$:focus $searchRoot": {
    //   borderBottom: "2px solid red"
    // }
    // "&$focused $searchRoot": {
    //   borderBottom: "2px solid red"
    // }
    // "$:focus $searchInput": {
    //   borderBottom: "2px solid red"
    // }
  }

Thanks in advance for any help.

[AlbinCederblad]

Did you solve this? im having the same problem.

[sonicka]

@AlbinCederblad Unfortunately I did not, sorry. I went with the default styling since it wasn't that important for the task back then. But in case you find the solution, please share it, I'm still curious.

[M1sterPl0w]

@AlbinCederblad

You can listen to onFocus and onBlur.

<SearchBar value= {query} placeholder="Start you search here!" searchIcon={<SearchIcon/>} onChange={(newValue) => setQuery(newValue)} className={searchBarFocus ? style.focusSearchbar : style.searchbar} onRequestSearch={() => onRequestSearch(query)} onFocus={() => setSearchBarFocus(true)} onBlur={() => setSearchBarFocus(false)}/>

You can change your state like I did. I have made two css classes, one for the focused one and one "normal" one.

@sonicka , what you tried to do was listening to a focus event. Only an input field have a focused event. If you see the code, it will generated some divs with at its core an input field. But that's not what you want I believe.

[c-17]

<SearchBar ref={s => {if(s != null)s.focus()}}/>