How to remove grid selection elements if not using popup form

Version

I’m using 2.0.2

Test Environment

Chrome, MacOS, React v18

Current Behavior

Here’s a reproduction: https://codesandbox.io/s/gracious-lehmann-bmnuf0?file=/src/App.js

I’m new to TUI Calendar, but from reading the API/docs, I assume this is how it we’re supposed to create events without using the popup, using the onSelectDateTime and the events prop:

      onSelectDateTime={(event) => {
        setEvents([...events, { start: event.start, end: event.end }]);
      }}
      events={events}

But I don’t know how I can remove the selection element after

https://user-images.githubusercontent.com/732422/179431161-49e91881-4b9e-4c8b-af36-494b186295d0.mov

I’ve tried doing this:

        event.gridSelectionElements.forEach((element) => {
          // I don't know why this setTimeout is needed, but it doesn't work without
          setTimeout(() => {
            element.remove();
          }, 0);
        });

And it works, but if I change the events array, it re-renders the selection element.

Expected Behavior

I don’t believe it is a bug. I think it’s my knowledge gap that I need help with.

[adhrinae]

@gustavo-depaula

Here’s a simple example code with types. You can use the class component itself for the generic type for the useRef hook.

function App() {
  const calRef = useRef<Calendar | null>(null);

  const handleClear = () => {
    calRef?.current?.getInstance()?.clearGridSelections();
  };

  return (
    <div className="App">
      <button onClick={handleClear}>Clear</button>
      <Calendar ref={calRef} />
    </div>
  );
}

[gustavo-depaula]

You’re a genius @adhrinae!!

Thanks for all the help!