SelectInput

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
 
const [defaultValue, setDefaultValue] = useState<any>('')
const [defaultValue2, setDefaultValue2] = useState<any>('')
const [defaultValue3, setDefaultValue3] = useState<any>('')
 
<SelectInput
    id="id"
    name="name"
    dropdownRender={dropdown}
    onChange={(i: any) => {
        console.log(i);
        setDefaultValue(i.value)
    }}
></SelectInput>
 
<SelectInput
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    setDefaultValue2(i.value);
  }}
  defaultValue={defaultValue2}
  wrapperClassName="mt-2"
  cleanTrigger={{
    valid: true,
    cleanValueLabel: "Clean",
    cleanFunc: () => {
      setDefaultValue2("");
    },
  }}
></SelectInput>
 
<SelectInput
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    setDefaultValue3(i.value);
  }}
  defaultValue={defaultValue3}
  wrapperClassName="mt-2"
  cleanTrigger={{
    valid: true,
    cleanValueLabel: "Clean",
    cleanFunc: () => {
      setDefaultValue3("");
    },
  }}
  manualSearchTrigger={true}  // When true, disables automatic search on focus or initialization; search must be triggered manually.
></SelectInput>
 

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any[]>([]) // *** the type must be array
 
<SelectInput
    id="id"
    name="name"
    dropdownRender={dropdown}
    onChange={(i: any) => {
        console.log(i);
 
        setDefaultValue(i)
    }}
    defaultValue={defaultValue}
    wrapperClassName="mt-2"
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any>('')
 
<SelectInput
  label="Top"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  dropdownPosition="top"
></SelectInput>
 
<SelectInput
  label="Bottom"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  wrapperClassName="my-2"
  dropdownPosition="bottom"
></SelectInput>
 
<SelectInput
  label="Auto"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  dropdownPosition="auto"
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any>('')
 
<SelectInput
    type="COMMON"
    id="id"
    name="name"
    dropdownRender={dropdown}
    onChange={(i: any) => {
        console.log(i);
 
        if(i) {
           setDefaultValue(i.value)
        } else {
           setDefaultValue(i)
        }
    }}
    defaultValue={defaultValue}
    isHandleInput={true}
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
  { id: 1, name: "OIE19022", age: "20" },
  { id: 2, name: "OIE19061", age: "22" },
  { id: 3, name: "SWE19048", age: "21" },
];
 
const [defaultValue, setDefaultValue] = useState<any>("");
 
<SelectInput
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.name);
  }}
  defaultValue={defaultValue}
  renderOption={(item: any) => (
    <>
      <span>{item.name}</span>
      <small className="d-flex flex-wrap align-items-center gap-1 text-secondary-emphasis anes-bill-justify-between">
        <span>id：{item.id}</span>
        <span>age{item.age}</span>
      </small>
    </>
  )}
  manualSearchTrigger={false}
></SelectInput>