I’m creating a reactJs form using the Fluent controls and Table to help layout the form (https://react.fluentui.dev/?path=/docs/components-table–default)
Within a row of the table, I have three buttons – Save, Save As, Delete that save/delete the content of the table above them. When SaveAs is clicked, it shows a further table row just below the buttons to accept the new name with OK and Cancel buttons (instead of popping up a modal dialog). The react function for that row is the following (with the Table configured to be rendered as rather than elements, so I can control the column widths with the flex attributes):
function getNewNameRow() {
const inputId = useId("newName");
const styles = useStyles();
return (
showNewName && (
<TableRow className={styles.tableNameRow} width="100%" onBlur={btnSaveAsCancelClick}>
<TableCell className={styles.tableNoResize}>
<label id={inputId}>New name:</label>
</TableCell>
<TableCell>
<Input
id={inputId}
className={styles.input}
aria-labelledby={inputId}
onChange={(e) => {
checkNewName(e);
}}
/>
</TableCell>
<TableCell className={styles.tableNoResize}>
<Button
appearance="primary"
size="small"
icon=<Checkmark20Filled />
onClick={btnSaveAsOKClick}
disabled={!enableSaveAsOK}
></Button>
<Button
appearance="secondary"
size="small"
icon=<Dismiss20Filled />
onClick={btnSaveAsCancelClick}
></Button>
</TableCell>
</TableRow>
)
);
}
so I can show/hide it by toggling the showNewName state.
I can’t work out how to manage the focus. What I want to happen is:
- If type a name in the input box, then click the OK button (in the same row), the Save code executes, saves the data and hides the New Name row.
- If I type a name in the input box, then click the Cancel button (in the same row), the Cancel code executes and hides the New Name row.
- If I click on the form anywhere outside the table row, it behaves the same as Cancel, hiding the NewName row.
- I should be able to tab between the Input, OK and Cancel buttons without it hiding, but hide if I tab out of those 3 (or trap me in there until I click Cancel)
As you can see, I was hoping to do this with the onBlur of the TableRow, but that fires as soon as I leave the Input box, even if it’s only to click the OK button – so the OK button is gone before it’s clicked.
I’m a bit of a newbie with ReactJs, Fluent and these controls, so please assume I know nothing!
