react-autocomplete
react-autocomplete copied to clipboard
id passed to the inputProps breaks the dropdown
if you pass an id to the inputProps, when you click on an option in the menu, firefox has a habit of keeping the menu open instead of closing it.
<div
className={className}
>
<label htmlFor={id}>
<Typography className={classes.label} variant="caption">
{label}
</Typography>
<AutoComplete
ref={(el: ?HTMLInputElement) => (this.input = el)}
getItemValue={getItemValue}
inputProps={{
...inputProps,
onBlur: (e: SyntheticInputEvent<HTMLInputElement>) => {
const input = e.target;
const value = input.value;
onBlur(input, value);
},
onFocus: (e: SyntheticInputEvent<HTMLInputElement>) => {
const input = e.target;
const value = input.value;
setTimeout(() => input.select(), 0);
onFocus(input, value);
},
id, // dropdown does not close with this line
}}
items={items}
onChange={onChange}
onSelect={(matchedValue: string, valObj: ItemObject) => {
onSelect(matchedValue, valObj);
setTimeout(() => this.input && this.input.blur(), 0);
}}
shouldItemRender={shouldItemRender}
sortItems={sortItems}
renderItem={(item: ItemObject, isHighlighted: boolean) =>
renderItem(item, isHighlighted, classes)
}
renderMenu={renderMenu}
value={value}
/>
</label>
</div>
reproducing:
- click on the input
- type a couple letters
- click on one of the options
(related-ish to #269)