the AutoComplete was poped out, I can't update the value, and it gives me an error. What a big mess!
ryuujo opened this issue · 2 comments
I already use react-autocomplete and I found so much error (or maybe my fault).
First, the data was already called, and it shows. But when I scroll down, the Autocomplete just popped out like this picture:
Then, I can't type anything inside of it, and when I click one of them, it returns error like this:
Uncaught ReferenceError: value is not defined
This is the code that I write
<AutoComplete getItemValue={item => item.city_name} items={state.location}
renderItem={(item, isHighlighted) =>
<div key={item.id} style={{background: isHighlighted ? 'lightgray' : 'white', color: 'black', fontSize:'0.5em'}}>
{item.city_name}
</div>
} onChange={(e) => value = e.target.value} onSelect={(val) => value = val}
/>
I just maked own classes and use absolute not fixed
<Autocomplete
wrapperProps={{className: 'bbs_autocomplete_wrapper'}}
renderMenu={(items) =>
<div className="bbs_autocomplete_content" children={items}/>
}
renderItem={(item) =>
<div key={JSON.stringify(item)} className="bbs_autocomplete_item">{item.display}</div>
}
/>
.bbs_autocomplete_wrapper {
position: relative;
width: 100%;
}.bbs_autocomplete_content {
position: absolute;
width: 100%;
max-height: 250px;
top: 100%;
left: 0;
margin-top: 4px;
border: 1px solid #ced4da;
border-radius: .2rem;
background: #fff;
font-size: 100%;
overflow: auto;
z-index: 999;
}.bbs_autocomplete_content:empty {
display: none;
}.bbs_autocomplete_item {
padding: 0.25rem 0.5rem;
font-size: 0.8125rem;
color: #232323;
cursor: pointer;
}.bbs_autocomplete_item:hover {
background: #f0f0f0;
}
FYI: In my case I just needed position: relative
in the wrapperStyle.