diff --git a/packages/select/changelog/@unreleased/pr-7028.v2.yml b/packages/select/changelog/@unreleased/pr-7028.v2.yml new file mode 100644 index 0000000000..13b1242c3c --- /dev/null +++ b/packages/select/changelog/@unreleased/pr-7028.v2.yml @@ -0,0 +1,5 @@ +type: fix +fix: + description: Fix buggy behavior with IME input in QueryList component + links: + - https://github.com/palantir/blueprint/pull/7028 diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx index e326843711..9b26b41745 100644 --- a/packages/select/src/components/query-list/queryList.tsx +++ b/packages/select/src/components/query-list/queryList.tsx @@ -519,16 +519,18 @@ export class QueryList extends AbstractComponent, QueryList }; private handleKeyDown = (event: React.KeyboardEvent) => { - const { key } = event; - const direction = Utils.getArrowKeyDirection(event, ["ArrowUp"], ["ArrowDown"]); - if (direction !== undefined) { - event.preventDefault(); - const nextActiveItem = this.getNextActiveItem(direction); - if (nextActiveItem != null) { - this.setActiveItem(nextActiveItem); + if (!event.nativeEvent.isComposing) { + const { key } = event; + const direction = Utils.getArrowKeyDirection(event, ["ArrowUp"], ["ArrowDown"]); + if (direction !== undefined) { + event.preventDefault(); + const nextActiveItem = this.getNextActiveItem(direction); + if (nextActiveItem != null) { + this.setActiveItem(nextActiveItem); + } + } else if (key === "Enter") { + this.isEnterKeyPressed = true; } - } else if (key === "Enter") { - this.isEnterKeyPressed = true; } this.props.onKeyDown?.(event);