Hex Core JS
    Preparing search index...

    Type Alias SearchDropDownProps<T>

    SearchDropDownProps: {
        autoFocus?: boolean;
        blurOnEndEditing?: boolean;
        clearOnSelect?: boolean;
        continueEditingOnSelect?: boolean;
        disabled?: boolean;
        disableFiltering?: boolean;
        disableSorting?: boolean;
        displayOption?: (props: SearchDropDownOption<T>) => React.ReactNode;
        dropDownClassName?: string;
        footerElement?: React.ReactNode;
        id?: string;
        inline?: boolean;
        inputClassName?: string;
        invalid?: boolean;
        isLoading?: boolean;
        loadingElement?: React.ReactNode;
        name?: string;
        noDropDownArrow?: boolean;
        noResultsElement?: React.ReactNode;
        onBlur?: () => void;
        onEndEditing?: () => void;
        onFocus?: () => void;
        openSide?: Extract<CardinalLocation, "top" | "bottom">;
        optionClassName?: string;
        options: SearchDropDownOption<T>[];
        pageSize?: number;
        placeholder?: string;
        preserveSearch?: boolean;
        searchKeys?: SearchDropDownSearchKey[];
        searchValue: string;
        setSearchValue: (searchValue: string) => void;
        setValue: (
            value: T,
            event: React.MouseEvent | React.KeyboardEvent,
        ) => void | { clear?: boolean; continueEditing?: boolean };
        showNoResults?: boolean;
        sideEffect?: (v: T) => void;
        value: T;
    } & Pick<TextInputProps, "before" | "after" | "gap"> & Partial<
        ClassNameProps & StyleProps,
    >

    Type Parameters

    Type Declaration

    • OptionalautoFocus?: boolean

      Indicates if the input should be auto-focused.

    • OptionalblurOnEndEditing?: boolean

      Indicates if the input should be blurred when editing ends. If set to false, default blur handling is used. If set to true the input is explicitly blurred when it would not be otherwise when editing ends (e.g. when an option is selected or when ESC is pressed). Generally should not be set in normal forms as preserving focus makes the form easier to use.

    • OptionalclearOnSelect?: boolean

      Indicates if the search value should be cleared when a value is selected.

    • OptionalcontinueEditingOnSelect?: boolean

      Indicates if the input should remain in editing state (showing drop-down) after a value is selected.

    • Optionaldisabled?: boolean

      Indicates if the input is disabled.

    • OptionaldisableFiltering?: boolean

      Indicates whether filtering should be disabled. For example, if filtering is handled in an ancestor.

    • OptionaldisableSorting?: boolean

      Indicates whether sorting based on the search value should be disabled. For example, if default order should be preserved.

    • OptionaldisplayOption?: (props: SearchDropDownOption<T>) => React.ReactNode

      Controls the display of rendered options.

    • OptionaldropDownClassName?: string

      CSS class name to give to the options drop-down.

    • OptionalfooterElement?: React.ReactNode

      An element to display at the bottom of the dropdown.

    • Optionalid?: string

      The ID of the input.

    • Optionalinline?: boolean

      Indicates if the drop down menu should be rendered with block display (so that it takes up space instead of overlaying). Useful when there is interactive content near the input or when in a tooltip (e.g. QuickFilter).

    • OptionalinputClassName?: string

      CSS class name to give to the input.

    • Optionalinvalid?: boolean

      Indicates if the input is invalid.

    • OptionalisLoading?: boolean

      Indicates if the options are currently loading.

    • OptionalloadingElement?: React.ReactNode

      A custom element to display as the loading option.

    • Optionalname?: string

      The name of the input.

    • OptionalnoDropDownArrow?: boolean

      Indicates if the drop down arrow (on the right side of the input) should be hidden.

    • OptionalnoResultsElement?: React.ReactNode

      A custom element to display as the "No Results" option.

    • OptionalonBlur?: () => void

      A callback function to call when focus is removed from the input.

    • OptionalonEndEditing?: () => void

      A callback function to call when editing ends on the input.

    • OptionalonFocus?: () => void

      A callback function to call when the input becomes focused.

    • OptionalopenSide?: Extract<CardinalLocation, "top" | "bottom">

      Optional manual control for the direction that the drop down opens in (unset is dynamic).

    • OptionaloptionClassName?: string

      CSS class name to give to each option.

    • options: SearchDropDownOption<T>[]

      The options for the value.

    • OptionalpageSize?: number

      Sets the maximum number of results displayed (users can opt to show more, which will render at most pageSize more results). Useful for optimizing render performance with a large number of options. If pageSize is less than zero (e.g. -1), all results are rendered.

    • Optionalplaceholder?: string

      Placeholder text to display when the value is blank.

    • OptionalpreserveSearch?: boolean

      Indicates if the search value should be preserved when focusing or bluring the input or when selecting a value. If set to true the setSearchValue function will only be called in response to typing, not due to other events except clearing on select if enabled.

    • OptionalsearchKeys?: SearchDropDownSearchKey[]

      A list of case-insensitive keys supported for search. Should match the keyedValues field of the given options. Elements of this array can either be a string or an object specifying a key and the matching behavior. The default matching behavior is "exact", which means the value following the key prefix must match the value in the option's searchValues object (ignoring case).

      Example usage in the input: "key:value".

      The keys "v", "val", and "value" are reserved and map to the underyling value of the option.

    • searchValue: string

      The search value entered.

    • setSearchValue: (searchValue: string) => void

      A callback function to update the searchValue when the user types.

    • setValue: (
          value: T,
          event: React.MouseEvent | React.KeyboardEvent,
      ) => void | { clear?: boolean; continueEditing?: boolean }

      A callback function to update the input value when a change happens.

    • OptionalshowNoResults?: boolean

      Indicates whether to show the "No Results" option if there are no results.

    • OptionalsideEffect?: (v: T) => void

      A side effect function to call when the value changes as a result of user interaction with this input, and not external updates to the field value.

    • value: T

      The value of the input.

    Settings

    Member Visibility