rsuite Popover 组件可通过键盘的 Tab 键访问

Question

• 我使用 rsuite Popover 创建带有两个按钮的弹出窗口。当我 使用键盘选项卡将焦点移至弹出按钮并单击 Enter 按钮，弹出对话框成功打开，有两个按钮。
• 但是当我再次单击选项卡按钮进入弹出窗口时，它不是 工作中，选项卡焦点位于下一个按钮内 弹出窗口。当我连续单击选项卡按钮时，选项卡按钮得到 将焦点转移到页面中的其他按钮，最后将选项卡焦点转移到 在弹出按钮内。
• 实际发生的情况：控件首先遍历所有按钮 然后最后它涉及到弹出窗口内容，如果弹出窗口 已激活。
• 我怎样才能实现这个目标？焦点应该集中在弹出窗口上 紧接着弹出框所属按钮之后的内容 到？

谁能告诉我如何处理这个问题？我对此很陌生。

    function tableElements(handleViewButton: {
    (rowData: Schedules): () => void;
    (arg0: SchedulesRow): React.MouseEventHandler<HTMLSpanElement> | undefined;
}) {
    const edit = {
        title: '',
        render: function Render(rowData: SchedulesRow) {
            const getRef = (element: HTMLButtonElement) =>
                editButtonsRef.current.splice(findButtonIndex(rowData.scheduleIdentifier, dataTable as any), 1, element);
            return (
                <div style={{
                    display: 'block', width: 80, paddingLeft: 5, paddingRight: 5
                }}>
                    <Whisper
                        trigger="click"
                        placement='bottom'
                        speaker={
                            <Popover>
                                <div className="button-wrapper">
                                    <button
                                        className={`icon-wrapper ${styles.editButton}`}
                                        aria-label={`Button1 ${rowData.scheduleIdentifier}`}
                                        onClick={() => handleViewButton(rowData)}
                                        ref={getRef}
                                        disabled={!schedulePermissions.edit?true:false}
                                        tabIndex={0}
                                    >
                                        <i className="fa fa-pencil pointer" aria-hidden/><span> Button1</span>
                                    </button>
                                </div>
                                <div className="button-wrapper">
                                    <button
                                        className={`icon-wrapper ${styles.editButton}`}
                                        aria-label={`Button2 ${rowData.scheduleIdentifier}`}
                                        onClick={() => {handleDeleteButton(rowData)}}
                                        ref={getRef}
                                        disabled={!schedulePermissions.delete?true:false}
                                        tabIndex={0}
                                    >
                                        <i className="fa fa-trash-o" aria-hidden/><span> Button2</span>
                                    </button>
                                </div>
                            </Popover>
                        }
                    >
                        <Button appearance="subtle" className="gear-wrapper" tabIndex={0}>
                            <i className="fa fa-gear"></i>
                        </Button>
                    </Whisper>
                </div>
            );
        },
    };

Answer 1

Popover 目前不支持焦点捕获。