SearchBox custom

[thomaslc66]

Hello,

I'm trying to use algolia, but for now this is not really a success.
Not the implementation, but more the style of the component and some of the SearchBox features.

Fisrt case : When i use the from algolia.

• Autofocus props is not working if the component is not monted. In my case the use has to click on the search bar menu that open a second view where the SearchBox from algolia is displayed in full screen: You can see the demo here search bar is in the top menu: Here
• I want to hide the search button and the reset button ? is there a props for this ?
• How to style the input (hide the border etc...)

Second case:
Because autofocus is not working on my case i've tried to used the connectSearchBox(component) method.

// inside my Search Hook component

  const SearchBox = ({ refine }) => {
    console.log('render')
    return (
      <input
        key="searchbox"
        type="search"
        id="livesearchInput"
        className={style.searchInput}
        value={searchText}
        onChange={event => changeSearchText(event.currentTarget.value, refine)}
        placeholder={formatMessage({ id: 'topBar.typeToSearch' })}
        ref={searchInput}
      />
    )
  }

  const Custom = connectSearchBox(SearchBox)


// return method
return (
    .... //some other component
    <Custom />
    ... //results
)

Then i use <Custom /> in my code but

• each time i push a key, the focus input lose focus and i need to click again inside every letter.
• This time the input is styled as i like
• It look likes every time i input a letter, my ref is lost and then reset again. I now this because when i console.log my ref i see null then <input ...etc ...etc />

My questions are, is there a way to put focus after a delay and style the component ? (First case senario)
Or is there a way to have a reference on my input that is not losing focus every key stroke ?

Thanks for your help.

[Haroenv]

Autofocus props is not working if the component is not monted. In my case the use has to click on the search bar menu that open a second view where the SearchBox from algolia is displayed in full screen: You can see the demo here search bar is in the top menu: Here

Are you saying this is or is not working now? I think it depends on how you are rendering, normally a newly rendered input with autoFocus gets focused. If that's not the case, you can use refs & call input.current.focus() in an effect

I want to hide the search button and the reset button ? is there a props for this ?

Using the connectors as you did is correct if you do not want to use the builtin component

How to style the input (hide the border etc...)

this is the same as any input, border: none; ...

For the autofocus behaviour you're describing, this doesn't seem like the default.
Can you create what you have so far in a sandbox environment? We have a template available for that purpose here. Thanks!

[thomaslc66]

I've manage to make something as close as possible but with no style

https://codesandbox.io/s/strange-breeze-x7w07

This is using your index so i can't test the refresh (when deleting an object) but the resfresh on the instant search component doesn't update when i delete one of my file on my dashboard. I can still see it in the results.

Thanks for your answer