diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx index e640ee48..87f2b73e 100644 --- a/optuna_dashboard/ts/components/DataGrid.tsx +++ b/optuna_dashboard/ts/components/DataGrid.tsx @@ -46,33 +46,33 @@ interface RowFilter { } function PaginationTextFieldComponent(props: { - onInputChange: (value: number) => void + onPageNumberSubmit: (value: number) => void maxPageNumber: number }): React.ReactElement { // This component is separated from DataGrid to prevent `DataGrid` from re-rendering the page, // every time any letters are input. - const { onInputChange, maxPageNumber } = props - const [navigationPage, setNavigationPage] = React.useState("") + const { onPageNumberSubmit, maxPageNumber } = props + const [specifiedPageText, setSpecifiedPageText] = React.useState("") const handleSubmitPageNumber = (event: React.FormEvent) => { event.preventDefault() - const newPage = parseInt(navigationPage, 10) - setNavigationPage("") // reset the input field + const newPage = parseInt(specifiedPageText, 10) + setSpecifiedPageText("") // reset the input field if (Number.isNaN(newPage)) { return } const newPageNumber = newPage <= 0 ? 1 : Math.min(newPage, maxPageNumber) // Page is 0-indexed in `TablePagination`. - onInputChange(newPageNumber - 1) + onPageNumberSubmit(newPageNumber - 1) } return (
{ - setNavigationPage(e.target.value) + setSpecifiedPageText(e.target.value) }} /> @@ -232,7 +232,7 @@ function DataGrid(props: { /> {maxPageNumber > 4 ? ( setPage(page)} + onPageNumberSubmit={(page) => setPage(page)} maxPageNumber={maxPageNumber} /> ) : null}