After searching some hours finally i find in documantion that public method hideMenu does what i want. Here is using ref with typescript way. `
import { Button, Col, Label, Row } from "reactstrap";
import { MenuItem, Typeahead, TypeaheadRef } from "react-bootstrap-typeahead";
import { AddTag } from "@/Constant/constant";
import SVG from "@/CommonComponent/SVG/Svg";
import { useRef, useState } from "react";
import { Option } from "react-bootstrap-typeahead/types/types";
interface DropDownComponentProps {
title: string;
labelKey: string;
placeHolder: string | undefined;
options: { name: string; header: boolean | null; key: string }[];
multiple: boolean | undefined;
isRequired: boolean | undefined;
onChange: Function;
}
const DropDownComponent: React.FC<DropDownComponentProps> = ({
title,
labelKey,
options,
multiple,
isRequired,
placeHolder,
onChange,
}) => {
const typeaheadRef = useRef<TypeaheadRef>(null);
const [selected, setSelected] = useState<Option[]>();
const handleBlur = () => {
typeaheadRef.current?.hideMenu();
};
return (
<Col sm="6">
<Row className="g-2 product-tag">
<Col xs="12">
<Label className="d-block m-0" for="validationServer01" check>
{title}
{isRequired && <span className="txt-danger"> *</span>}
</Label>
</Col>
<Col xs="12">
<i
className="fa fa-angle-down"
style={{
textAlign: "center",
width: "12px",
lineHeight: "10px",
zIndex: 1,
position: "absolute",
top: "50%",
right: "2%",
}}
></i>
<Typeahead
id="multiple-typeahead"
labelKey={labelKey}
multiple={multiple}
options={options}
onChange={(selected) => {
console.log({ selected });
setSelected(selected);
// typeaheadRef.current?.clear();
}}
allowNew={true}
ref={typeaheadRef}
selected={selected}
onBlur={handleBlur}
/>
{placeHolder && <p className="f-light">{placeHolder}</p>}
</Col>
</Row>
</Col>
);
};
export default DropDownComponent;
`