fix: add class name to input
This commit is contained in:
parent
7e9e6990d7
commit
49e9e3f69a
|
@ -3,7 +3,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], .suggestion-list {
|
.autocomplete-input, .suggestion-list {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid #f7f8f9;
|
border: 1px solid #f7f8f9;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
|
@ -12,9 +12,10 @@ input[type="text"], .suggestion-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus {
|
.autocomplete-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 2px solid #4360DF;
|
border: 2px solid #4360DF;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-list {
|
.suggestion-list {
|
||||||
|
|
|
@ -53,12 +53,11 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
|
||||||
<div className="autocomplete-container">
|
<div className="autocomplete-container">
|
||||||
<div className={isFocused ? 'suggestion-list' : ''}>
|
<div className={isFocused ? 'suggestion-list' : ''}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
className="autocomplete-input"
|
||||||
value={word}
|
value={word}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onFocus={handleInputFocus}
|
onFocus={handleInputFocus}
|
||||||
onBlur={handleInputBlur}
|
onBlur={handleInputBlur}
|
||||||
style={{ marginBottom: isFocused ? '5px' : '0' }}
|
|
||||||
/>
|
/>
|
||||||
{isFocused &&
|
{isFocused &&
|
||||||
suggestions.map(suggestion => (
|
suggestions.map(suggestion => (
|
||||||
|
|
Loading…
Reference in New Issue