diff --git a/packages/core/src/common/utils/domUtils.ts b/packages/core/src/common/utils/domUtils.ts index dea1ad826f..9deb896fde 100644 --- a/packages/core/src/common/utils/domUtils.ts +++ b/packages/core/src/common/utils/domUtils.ts @@ -150,6 +150,14 @@ function throttleImpl( } export function clickElementOnKeyPress(keys: string[]) { - return (e: React.KeyboardEvent) => - keys.some(key => e.key === key) && e.target.dispatchEvent(new MouseEvent("click", { ...e, view: undefined })); + return (e: React.KeyboardEvent) => { + if (keys.some(key => e.key === key)) { + // Prevent spacebar from scrolling the page unless we're in a text field + if (!elementIsTextInput(e.target as HTMLElement)) { + e.preventDefault(); + } + + e.target.dispatchEvent(new MouseEvent("click", { ...e, view: undefined })); + } + }; } diff --git a/packages/docs-app/src/examples/core-examples/menuExample.tsx b/packages/docs-app/src/examples/core-examples/menuExample.tsx index c046dce8ee..23b9bf8f34 100644 --- a/packages/docs-app/src/examples/core-examples/menuExample.tsx +++ b/packages/docs-app/src/examples/core-examples/menuExample.tsx @@ -16,13 +16,14 @@ import * as React from "react"; -import { Classes, H5, Icon, Menu, MenuDivider, MenuItem } from "@blueprintjs/core"; +import { Classes, H5, Icon, InputGroup, Menu, MenuDivider, MenuItem } from "@blueprintjs/core"; import { Example, type ExampleProps } from "@blueprintjs/docs-theme"; import { getSizeProp, type Size, SizeSelect } from "./common/sizeSelect"; export function MenuExample(props: ExampleProps) { const [size, setSize] = React.useState("regular"); + const [count, setCount] = React.useState(0); const options = ( <> @@ -39,6 +40,12 @@ export function MenuExample(props: ExampleProps) { + setCount(oldCount => oldCount + 1)} + text="Increment" + /> } text="Settings..." intent="primary" /> @@ -61,6 +68,12 @@ export function MenuExample(props: ExampleProps) { + } + shouldDismissPopover={false} + />