Function InputSelect

ui/src/components/select/InputSelect.tsx:45–119

({ value,label, options, onChange, variant = "outline", customOption = null, placeholder = "...", size = "sm", isClearable = false, placement="bottom", showArrow = true,closeOnBlur=true ,matchWidth=true,enableInput=true,width="200px"}: SelectProps)

}

const InputSelect = ({ value,label, options, onChange, variant = "outline", customOption = null, placeholder = "...", size = "sm", isClearable = false, placement="bottom", showArrow = true,closeOnBlur=true ,matchWidth=true,enableInput=true,width="200px"}: SelectProps) => {
    const { isOpen, onToggle, onClose } = useDisclosure()
    const [entered, setEntered] = useState(false)
    const [query, setQuery] = useState('')

    useEffect(() => {
        if (enableInput) {
            setQuery(label??(value??''))
        }
    },[value,label])

    const ref = useRef(null)

    const onOptionClick = option => {
        onChange(option.value)
        onToggle()
        setEntered(false)
    }

    const searchedResult = useMemo(() => {
        const q = query.trim()
        if (!entered ||  q == "") {
            return options
        }

        return options.filter(o => (label !== null ? o.label :  o.value).toLowerCase().indexOf(q) >= 0)
    }, [options, query])

    const getBorderStyle = () => {
        if (variant == "outline") return "bordered"
        if (variant == "flushed") return "bordered-bottom"
        if (variant == "unstyled") return ""
    }

    const clearSelected = (e: MouseEvent) => {
        e.stopPropagation()
        onChange('')
    }

    const [isLargeScreen] = useMediaQuery(MobileBreakpoint)
    return (<>
        {<Flex height={`${size=="md" ? 'var(--chakra-sizes-10)' : (size=="sm" ? 'var(--chakra-sizes-8)' : 'var(--chakra-sizes-12)')}`} px="3" className={getBorderStyle()} py="1"  justifyContent="space-between" alignItems="center" cursor="pointer" onClick={onToggle}><Tooltip placement="right" openDelay={500} label={value}><Text width={width} maxW={width}  noOfLines={1} layerStyle="textSecondary" opacity="0.7" fontSize={size == "sm" ? "0.9rem" : "1rem"}>{label ?? (isEmpty(value)? placeholder : value)}</Text></Tooltip> {isClearable && value ? <FaTimes fontSize="0.8rem" onClick={clearSelected} opacity="0.6"/> :  showArrow && <Box pl="1"><FaChevronDown fontSize="0.6rem" /></Box>}</Flex>}
        <Popover matchWidth={matchWidth} closeOnBlur={closeOnBlur}    placement={placement} isOpen={isOpen} initialFocusRef={ref} onClose={onClose}>
            <PopoverTrigger >
                <Box position="absolute"></Box>
            </PopoverTrigger>
            <Portal>
                <PopoverContent  borderRadius={2} width={isLargeScreen ? "500px" : "240px"}>
                    {/* <PopoverArrow /> */}
                    <PopoverBody p="0">
                        <Box>
                            <Input px="2" py="2" value={query} onChange={e => { setQuery(e.currentTarget.value.toLowerCase());if (!entered) {setEntered(true)} }} ref={ref} size={size} variant="unstyled" className="bordered-bottom"  placeholder="input to search, press Enter to use current input" onKeyDown={e => {
                                 if (enableInput &&  e.key === 'Enter') {
                                    onChange(query)
                                    onToggle()
                                    setEntered(false)
                                }
                            }} />