carbon-design-system/carbon

Custom search for filterable multiselect

Closed

#6,639 opened on Aug 7, 2020

View on GitHubContributor guide
 (4 comments) (1 reaction) (0 assignees)JavaScript (1,733 forks)batch import
afrohackscomponent: filterable-multiselectcomponent: multiselecthacktoberfestneeds: community contributionproposal: openstatus: help wanted 👐type: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (PR metrics pending)

Description

Summary

Want to be able to override the search method used for MultiSelect.Filterable. Downshift takes onInputValueChange prop, but carbon sets its own method for that: https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/MultiSelect/FilterableMultiSelect.js#L330

Adding custom method to downshift props does not override Carbon's method. See sandbox.

Justification

My use case triggers an API call when users search in the MultiSelect component. API returns filtered list based on input value. List would otherwise be too long.

Desired UX and success metrics

Want to be able to set own custom downshift prop for onInputValueChange

"Must have" functionality

Ability to override Carbon's search method, but use carbon's method if no custom method provided.

Specific timeline issues / requests

August 31st deadline for feature in upcoming release

Contributor guide

Research direction
Examine the FilterableMultiSelect component's use of onInputValueChange and props spreading to Downshift. Determine how to allow users to pass a custom onInputValueChange that overrides Carbon's default while falling back to Carbon's method if not provided. Consider adding a new prop like `customOnInputValueChange` or extending existing props merging logic.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCarbon Design System
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40