Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fixes bug where clicking on the canvas did not remove focus from other elements #539

Merged
merged 2 commits into from
Feb 11, 2025
Merged

fix: Fixes bug where clicking on the canvas did not remove focus from other elements #539

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c590dd
fix: Fixes bug where clicking on the canvas did not remove focus from…
ShrimpCryptid Feb 4, 2025
7acd58e
refactor: Prevent blurring of the canvas if the canvas is being clicked
ShrimpCryptid Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions src/components/CanvasWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,9 +489,9 @@ export default function CanvasWrapper(inputProps: CanvasWrapperProps): ReactElem

const onMouseClick = useCallback(
(event: MouseEvent): void => {
// Note that click events won't fire until the mouse is released. We need to check
// if the mouse was dragged before treating the click as a track selection; otherwise
// the track selection gets changed unexpectedly.
// Note that click events won't fire until the mouse is released. We need
// to check if the mouse was dragged before treating the click as a track
// selection; otherwise the track selection gets changed unexpectedly.
if (!isMouseDragging.current) {
handleTrackSelection(event);
}
Expand All @@ -506,7 +506,14 @@ export default function CanvasWrapper(inputProps: CanvasWrapperProps): ReactElem
}, []);

const onMouseDown = useCallback((event: MouseEvent): void => {
event.preventDefault(); // Prevent text selection
// Prevent the default behavior for mouse clicks that would cause text
// selection, but keep the behavior where focus is removed from other
// elements.
event.preventDefault();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was what was causing the bug, but event.preventDefault is still mostly desired behavior. Simulate the focus behavior by blurring the active element in the document.

if (document.activeElement instanceof HTMLElement && document.activeElement !== canv.domElement) {
document.activeElement.blur();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will it blur itself too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooh, good question. I don't think blurring itself would do anything because it's not an element that has focus behavior or styling, but I'll add a check in and skip blurring if it's the same element. Thank you!

}

isMouseDragging.current = false;

if (event.button === MIDDLE_CLICK_BUTTON) {
Expand Down