fix: add class name to input

This commit is contained in:
RadoslavDimchev 2023-09-04 11:33:01 +03:00
parent 7e9e6990d7
commit 49e9e3f69a
2 changed files with 4 additions and 4 deletions

View File

@ -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 {

View File

@ -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 => (