- I used rsuite Popover to create popover with two buttons. When I get focus to the popover button using keyboard tab and clicked enter button, Popover dialog box successfully opened with two buttons.
- But when I click again tab button to go inside the popover, its not working, The tab focus go inside the next buttons that's are out of popover. When I click the tab button continuously, the tab button get focus to other buttons in the page and at the last the tab focus go inside the popover button.
- What actually happens: The control goes through all the buttons first and then at the end it comes to the popover contents if the popover is active.
- How can I achieve this? That the focus should come to popover contents immidiately after the button to which the popover belongs to?
Can anyone tell me how can I handle this? I am new to this.
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>
);
},
};
