Feature Request: custom trigger element

[breynolds-dev]

Just picked up the library and it's been very useful for me, but there was a use case I ran into where I would love to still use all the logic and everything built into using the dropdown, but I want to replace the triggering element with a custom element instead.

Looking over the source and testing it out I was able to replicate sort of what I imagined in a very simplistic solution:

      { CustomDropdown?.( { toggleExpanded } ) ?? (
          <div
          className={cn(DropdownHeading, "dropdown-heading")}
          onClick={toggleExpanded}
        >
            <div className="dropdown-heading-value">
            <DropdownHeader />
          </div>
          {isLoading && <Loading />}
          {value.length > 0 && (
            <button
              type="button"
              className={cn(ClearSelectedButton, "clear-selected-button")}
              onClick={handleClearSelected}
              disabled={disabled}
              aria-label={t("clearSelected")}
            >
              {ClearSelectedIcon || <Cross />}
            </button>
          )}
          <FinalArrow expanded={expanded} />
        </div>
      )}

just choosing to invoke the CustomDropdown method and if it returns something valid it'll use that, otherwise it falls back to the standard.

The only real issue I ran into was the border surrounding the parent element and I just commented those lines out for the example here, but I just wondered if you've given any thought to something like this? I'd really love to be able to use it this way

[harshzalavadiya]

@breynolds-dev I think you should be able to achieve same result using css overrides + custom renderer, I have unique classnames added to most components just for this reason

Peek.2021-03-02.14-14.mp4

.dropdown-container {
	border: 0;
	display: inline-block;
}
.dropdown-heading{
	padding: 0;
	height: auto;
}
.dropdown-heading-dropdown-arrow{
	display: none;
}

<MultiSelect
    options={options}
    value={selected}
+   valueRenderer={() => <button>Dropdown</button>}
    onChange={setSelected}
    labelledBy={"Select"}
  />

[breynolds-dev]

I will give that a try. The only problem I see is the type is expecting valueRenderer to return a string, could that type be updated to accept a string or JSX.Element?

[harshzalavadiya]

v3.1.4 released