Filterable Select with object values

gusch commented 2 weeks ago

Description

I have linked a FilterableSelect to react form. The particularity here is that the value of the options is an object. Filtering is working but ... If you select “Black”, then put the cursor at the end of the text, you won’t be able to remove the letters with backspace. If values are string, it is working fine.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-aa9gdv?file=package.json,src%2FApp.tsx

Steps to reproduce

No response

JIRA ticket numbers (Sage only)

No response

Carbon version

144.2.2

Design tokens version

4.22.0

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

We have the same problem in CM using Formik. So it seems not to be a react form issue.

What i saw is that for each backspace in the “string version”, i have a onChange then a onFitlerChange. But i only have the onChange for the “object version”.

Confidentiality

[X] I confirm there is no confidential or commercially sensitive information included.

nuria1110 commented 1 week ago

FE-6901

edleeks87 commented 1 week ago

We're keen to address this as part of the RFC and rewrite work we have planned for the Select components. We suspect it will require some rewriting of code which seems redundant when the whole component is soon to be rewritten etc. In the mean time we think a workaround is available, if this is not the case for you please let us know and we'll increase the priority of this.

@nicktitchmarsh fyi

Sage / carbon