Autofocus lose while typing in SearchBox

Elastic Stack Elasticsearch
1

Hello,

I have component from > @elastic/react-search-ui .
For searchbox desing customization used inputView.
But when I started typing suddenly autofocus is losing , so I need to enter cusor again into input element to continue typing.

Here is my code.

  <SearchBox
                              inputView={({
                                getAutocomplete,
                                getInputProps,
                                getButtonProps,
                              }) => (
                                 <>
                                    <div
                                      className="sui-search-box__wrapper">                
                                  <input  
                                        style={{ height:  "50px"}}
                                        className="sui-search-box__text-input"
                                        {...getInputProps({})}
                                      />
                                </div> 
                               </>
                            )}
                              shouldClearFilters={shouldClearFilters}
                              autocompleteMinimumCharacters={
                                autocompleteMinimumCharacters
                              }
                              autocompleteSuggestions={false}
                              searchAsYouType={true}
                              debounceLength={300}
                            
                              inputProps={{
                                placeholder: "type..."
                              }}
                            />

If this can be resolve using any event or react useRef or stopping re-rendering all solutions are welcome.
Also is there any way to access and modify input value using state or any logic.
Because setting value to input using value prop also not working.
searchbox is Used inside react functional component.

Thank you.

2

@JasonStoltz, @M_M I am waiting for the positive responses.
For getting user input i have used searchTerm from elastic config object.

 a11yNotificationMessages: {
      searchResults: ({ start, end, totalResults, **searchTerm** }) => {
      },

I am not using any **<Layout>** or **<WithSearch>** or withSearch apis.

3

Are you able to reproduce your issue in a https://codesandbox.io/? You could use this as a base: https://codesandbox.io/s/github/elastic/search-ui/tree/main/examples/sandbox?from-embed=&initialpath=/app-search&file=/src/pages/app-search/index.js

Also is there any way to access and modify input value using state or any logic.

The input is controlled via the searchTerm prop, so you would use the setSearchTerm action. Actions | Documentation

4

Hello @JasonStoltz ,

I have Wraped my component with withSearch to get access to searchTeam but it's throwing the error.

Cannot read property 'driver' of undefined

5

Hii @JasonStoltz ,

I have found the solution for this issue.
We need to set the autoFocus attribute to the input.

InputView is providing inputProps for input attributes as well.

Code:

  inputProps={{
                                    placeholder:
                                      tabValue === 0
                                        ? t("WebCode")
                                        : t("Text/Ref./Keywords"),
                                    onKeyPress: onKeyPress,
                                    **autoFocus: true,**
                                  }}
6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.