Is it possible to modify the search bar length? + defaultValue doesn't seem to work

Question

Is it possible to make the length of the search bar wider? I am not talking about the actual size because there is a size property, just length.

Also, the defaultValue in Search doesn't seem to work at all, is it just me? The code I am using is basiclly a copy paste of this one: https://react.semantic-ui.com/modules/search/#types-category I just added:

let defaultValue = "Search"

before the render and my Search call is like so (Added the defaultValue part that doesn't show)

                <Search
                    defaultValue={defaultValue}
                    category
                    loading={isLoading}
                    onResultSelect={this.handleResultSelect}
                    onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
                    results={results}
                    value={value}
                    {...this.props}
                />

Answer 1

You can do something like this:

1. set the value attribute like value || defaultValue value || defaultValue - This will set the default value for the search field if the value is empty

2. Set a class name to the search component and change the width via css

  <Search className="search-bar" loading={isLoading} onResultSelect={this.handleResultSelect} onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })} results={results} value={value || defaultValue} {...this.props} /> 

 .search-bar{ width: 500px; .input{ width: 100%; } } 

Here is the live demo

Hope it helps :)

Answer 2

Yes, we can adjust search bar length by changing padding size in style.

.search-bar{
padding-left:50px;
}