Function Dropdown

components/dash-core-components/src/fragments/Dropdown.tsx:28–661

(props: DropdownProps)

import uuid from 'uniqid';

const Dropdown = (props: DropdownProps) => {
    const {
        id,
        className,
        closeOnSelect,
        clearable,
        debounce,
        disabled,
        labels,
        maxHeight,
        multi,
        options,
        optionHeight,
        setProps,
        searchable,
        search_value,
        search_order,
        style,
        value,
    } = props;
    const [optionsCheck, setOptionsCheck] = useState<DetailedOption[]>();
    const [isOpen, setIsOpen] = useState(false);
    const [displayOptions, setDisplayOptions] = useState<DetailedOption[]>([]);
    const [val, setVal] = useState<DropdownProps['value']>(value);
    const persistentOptions = useRef<DropdownProps['options']>([]);
    const dropdownContainerRef = useRef<HTMLButtonElement>(null);
    const dropdownContentRef = useRef<HTMLDivElement>(
        document.createElement('div')
    );
    const searchInputRef = useRef<HTMLInputElement>(null);
    const optionsListRef = useRef<OptionsListHandle>(null);
    const focusedIndexRef = useRef(-1);
    const pendingSearchRef = useRef('');

    const ctx = window.dash_component_api.useDashContext();
    const loading = ctx.useLoading();

    // Sync val when external value prop changes
    useEffect(() => {
        if (!isEqual(value, val)) {
            setVal(value);
        }
    }, [value]);

    if (!persistentOptions || !isEqual(options, persistentOptions.current)) {
        persistentOptions.current = options;
    }

    const sanitized = useMemo(
        () => sanitizeDropdownOptions(persistentOptions.current),
        [persistentOptions.current]
    );
    const sanitizedOptions = sanitized.options;

    const filteredOptions = useMemo(
        () =>
            searchable
                ? filterOptions(sanitized, search_value, search_order)