React-calendar-timeline: Unselect Item after some operation when clicked

[b5imply]

Is there in any way to disable the selection on an item?

Here is what I need:
I click on a timeline-item. The item have a onClick function attached to it. The onClick function renders a modal. I do my stuff in the modal and finishes. When the modal is gone, the item is unselected and I can click on a different item, or the same to fire the onClick again.

Here is what I got:
When I click on a item, i'ts fine. It fires the onClick function and opens my modal. When i come back from my modal, I need to "unselect" by clicking on a blank spot in the timeline in order to select that item again.

Reproducible test case: https://codesandbox.io/s/qlj6qvjrnw
(just click on an item: it gets yellow. To unselect, click outside)

Any help is appriciated.

[vasdee]

I think you could achieve this by manually controlling the selected prop and not have the timeline do it for you. Adding the current itemId to the selected array then removing it on the modal close event

[mcMickJuice]

@b5imply does @vasdee 's tip help you out?

[b5imply]

I've tested this out, and it worked. I had to define selected as an empty array, have the same eventHandler method on "onItemClick" and "onItemSelect" in order to make this work. It is a hack to an existing solution tho.

Including solution:
https://codesandbox.io/s/7y0w1wmwrq