Big issue when creating a custom context menu

[AlenToma]

Hi, I am using this library to display some button so I could for example copy, share etc.

The problem is that the Popover disappear before the click event even trigger. there should be a settimeout at least so that click event may trigger if the popup previous state is visible.

Please could you check this out. I saw that you are using use-text-selection are you the owner of the library ?

should this problem be handled here or in use-text-selection.

Here is a code view should if you are interested of what I mean.

         {
            this.props.bookOption.selectionMenus && this.props.bookOption.selectionMenus.length ? (
              <Popover
                mount={this.chapterRef.current as HTMLElement | undefined}
                render={
                  ({ clientRect, isCollapsed, textContent }) => {

                    if (clientRect == null || isCollapsed) return null
                    var row = "";
                    var column = "";
                    if (this.props.bookOption.selectionMenus) {
                      this.props.bookOption.selectionMenus.forEach((_, i) => {
                        if (i % 3 === 0)
                          row += " 1fr";
                      });

                      if (this.props.bookOption.selectionMenus.length >= 3)
                        column = "1fr 1fr 1fr";
                      else column = this.props.bookOption.selectionMenus.map(() => "1fr").join(" ");

                    }

                    // I'm using emotion for this example but you can use anything really
                    const style = {
                      position: "absolute",
                      left: document.documentElement.scrollLeft + (clientRect.left + clientRect.width / 2),
                      top: document.documentElement.scrollTop + (clientRect.top - 40),
                      marginLeft: -75,
                      gridTemplateColumns: column,
                      gridTemplateRows: row
                    } as React.CSSProperties

                    return <div className='bookMenu' style={style}>
                      {
                        this.props.bookOption.selectionMenus?.map((x, i) => (
                          <a key={i} onClick={(event) => {
                           // this never trigger.
                            var result = {
                              selectedText: textContent,
                              rec: clientRect,
                              menuIndex: i
                            } as SelectionResult
                            console.log(result)
                            if (this.props.bookOption.selectionMenuClick)
                              this.props.bookOption.selectionMenuClick(result);
                          }}>
                            {
                              x.icon && typeof x.icon === "string" ? (<img src={x.icon} />) : null
                            }
                            {
                              x.icon && typeof x.icon !== "string" ? (x.icon) : null
                            }
                            {x.text}
                          </a>
                        ))
                      }
                    </div>
                  }
                }
              />
            ) : null}