no scroll on link click
MODIFY
src/client/src/components/SelectableCard/index.tsx
src/client/src/components/SelectableCard/index.tsx
@@ -20,6 +20,7 @@ import { ReactComponent as Plus } from "../../assets/plus.svg";
import { ReactComponent as Subtract } from "../../assets/subtract.svg";
import plus from "../../assets/plus.svg";
import subtract from "../../assets/subtract.svg";
+import spaceKeyHandler from "../../utils/spaceKeyHandler";
const SelectableCard = ({
iconPath,
@@ -111,6 +112,7 @@ const SelectableCard = ({
onClick={detailsClickWrapper}
className={classNames(styles.link)}
to={ROUTES.PAGE_DETAILS}
+ onKeyUp={spaceKeyHandler}
>
<FormattedMessage
id="selectableCard.details"

MODIFY
src/client/src/utils/spaceKeyHandler.ts
src/client/src/utils/spaceKeyHandler.ts
import * as React from "react";
import {KEY_EVENTS} from "./constants"
+// document.documentElement.addEventListener('keydown', (e) => {
+// if (e.key === KEY_EVENTS.SPACE) e.preventDefault();
+// })
+
const spaceKeyHandler = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
- console.log(e.type);
+
let anchor = e.target as HTMLAnchorElement;
+
+ //if pressing space on an anchor, prevent page scroll.
+ anchor.onkeydown = (e) => {
+ if (e.key === KEY_EVENTS.SPACE) e.preventDefault();
+ }
+
if (e.key === KEY_EVENTS.SPACE) {
anchor.click();
- // const x = new MouseEvent('click', {
- // view: window,
- // bubbles: true
- // });
- // e.target.dispatchEvent(x);
}
}

no scroll on link click