79138546

Date: 2024-10-29 18:45:38
Score: 0.5
Natty:
Report link

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;

`

Reasons:
  • RegEx Blacklisted phrase (1): i want
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: furkotikoo