fix(timetable): ESC key not working sometimes (#3680)

jloh02 · ravern · web-flow · commit 99da62b19527 · 2024-03-27T15:36:37.000+08:00
Co-authored-by: Ravern Koh &lt;ravernkoh@gmail.com&gt;
diff --git a/website/src/views/timetable/TimetableCell.tsx b/website/src/views/timetable/TimetableCell.tsx
@@ -128,6 +128,7 @@ const TimetableCell: React.FC<Props> = (props) => {
       onTouchStart={() => onHover(getHoverLesson(lesson))}
       onMouseLeave={() => onHover(null)}
       onTouchEnd={() => onHover(null)}
+      autoFocus={lesson.isActive}
       {...conditionalProps}
     >
       <div className={styles.cellContainer}>
diff --git a/website/src/views/timetable/TimetableContent.tsx b/website/src/views/timetable/TimetableContent.tsx
@@ -356,7 +356,7 @@ class TimetableContent extends React.Component<Props, State> {
           verticalMode: isVerticalOrientation,
         })}
         onClick={this.cancelModifyLesson}
-        onKeyUp={(e) => e.keyCode === 27 && this.cancelModifyLesson()} // Quit modifying when Esc is pressed
+        onKeyUp={(e) => e.key === 'Escape' && this.cancelModifyLesson()} // Quit modifying when Esc is pressed
       >
         <Title>Timetable</Title>
 

Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,7 @@ const TimetableCell: React.FC<Props> = (props) => {`
`128`	`128`	`onTouchStart={() => onHover(getHoverLesson(lesson))}`
`129`	`129`	`onMouseLeave={() => onHover(null)}`
`130`	`130`	`onTouchEnd={() => onHover(null)}`
	`131`	`+ autoFocus={lesson.isActive}`
`131`	`132`	`{...conditionalProps}`
`132`	`133`	`>`
`133`	`134`	`<div className={styles.cellContainer}>`
Original file line number	Diff line number	Diff line change
`@@ -356,7 +356,7 @@ class TimetableContent extends React.Component<Props, State> {`
`356`	`356`	`verticalMode: isVerticalOrientation,`
`357`	`357`	`})}`
`358`	`358`	`onClick={this.cancelModifyLesson}`
`359`		`- onKeyUp={(e) => e.keyCode === 27 && this.cancelModifyLesson()} // Quit modifying when Esc is pressed`
	`359`	`+ onKeyUp={(e) => e.key === 'Escape' && this.cancelModifyLesson()} // Quit modifying when Esc is pressed`
`360`	`360`	`>`
`361`	`361`	`<Title>Timetable</Title>`
`362`	`362`