<MultiSelect.Filterable component select all, all items not selecting, although state updating in react.

[hrshtpnt]

URGENT HELP NEEDED

I added select all option within the list, but the component does not re-render even when the state is changing and updating. Is there a way to re-render the component.

I tried to use a key prop key={Math.random()} with this my logic seems to work but the dropdown collapses/re-renders on each item select.

[emyarod]

hi @hrshtpnt can you create a reduced test case in Code Sandbox for easier testing and debugging?

[hrshtpnt]

Thanks for looking into the issue @RobertaJHahn, @emyarod I created a mock test as requested for testing and debugging. Below is the sandbox link for the same. (https://codesandbox.io/s/filterable-multiselect-d5stb)

[emyarod]

it looks like you are using the Carbon React component which does not support fully uncontrolled use cases, so the menu closing is a direct result of rerendering the component (because the key prop is needed in this case). you will also most likely need more information from the component to be returned in the change handler since it currently does not contain enough to implement deselection properly. I would recommend opening a feature request on the Carbon issue tracker

related https://github.com/carbon-design-system/carbon/issues/2623

[hrshtpnt]

Already raised a request for it, here is the link https://github.com/carbon-design-system/carbon/issues/9819

@emyarod since the state/prop provided to it is changing for selected items, should the component not rerender on its own as it's a prop in the component? Looks like it's an existing defect in the MultiSelect.Filterable component. The key prop is required only in the case when we have a couple of multi-selects together loading through a map function. The math.random() is a hard way to refresh the component.

@gdelory already provided a temporary solution to the deselection in another thread. I was looking for a similar solution for select-all scenario if possible until the component is fully controllable.

[emyarod]

unfortunately that seems to be the only way to implement something close to a select-all scenario with the current React multiselect, although this may be more easily achievable using carbon-web-components given the differences in state management

if you intend to continue using Carbon React then the issue you created there should be the one to watch

[hrshtpnt]

Can you elaborate on the solution you are proposing? I don't understand the more easily achievable using carbon-web-components given the differences in state because I am currently using the carbon-web-component @emyarod

[emyarod]

@hrshtpnt according to the code sandbox you provided you're using carbon-components-react and not carbon-web-components, is that right? if so, then the issue would be just as we discussed (currently no workaround for rerendering the component with a key in your use case). you would need to keep an eye on the other issue you created (carbon-design-system/carbon#9819) for further info on the React implementation

[hrshtpnt]

Yes I am using carbon-components-react. @emyarod are you implying that if I use the carbon-web-components I will be able to achieve my goal? I am only looking for a way to update the components when the propselectedItem change. This is expected behaviour in react components right? Does carbon internally controls when to update the components by using something like React.memo?

[emyarod]

@hrshtpnt yes I believe this is achievable using carbon-web-components as you can make use of the bx-multi-select-selected event (https://codesandbox.io/s/trusting-brahmagupta-2vbkg?file=/src/index.js)

with the version of carbon-components-react that you're using in your sandbox I'm not sure if your use case is fully achievable. I would keep an eye on the issue you created (https://github.com/carbon-design-system/carbon/issues/9819), but since there seems to be similar open issues already like https://github.com/carbon-design-system/carbon/issues/4812, it may be difficult fighting against the component's built in state manager. given that you're using carbon-components-react I think this ticket can be closed in favor of the one you opened in the other repository