# Autofocus lose while typing in SearchBox

**URL:** <https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091>\
**Category:** Elasticsearch\
**Created:** [July 11, 2023, 10:22am UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091 "2023-07-11T10:22:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![raj22](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@raj22](https://discuss.elastic.co/u/raj22)\
**Post date:** [July 11, 2023, 10:22am UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/1 "2023-07-11T10:22:52Z")

</div>

**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.

```auto
  <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.

---

<div class="post-metadata">

**Author:** ![raj22](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@raj22](https://discuss.elastic.co/u/raj22)\
**Post date:** [July 11, 2023, 10:42am UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/2 "2023-07-11T10:42:32Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [July 11, 2023, 12:24pm UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/3 "2023-07-11T12:24:31Z")

</div>

Are you able to reproduce your issue in a [https://codesandbox.io/](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](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](https://docs.elastic.co/search-ui/api/core/actions#setsearchterm)

---

<div class="post-metadata">

**Author:** ![raj22](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@raj22](https://discuss.elastic.co/u/raj22)\
**Post date:** [July 14, 2023, 12:56pm UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/4 "2023-07-14T12:56:55Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![raj22](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@raj22](https://discuss.elastic.co/u/raj22)\
**Post date:** [July 17, 2023, 10:06am UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/5 "2023-07-17T10:06:22Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 14, 2023, 10:06am UTC](https://discuss.elastic.co/t/autofocus-lose-while-typing-in-searchbox/338091/6 "2023-08-14T10:06:42Z")

</div>

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