From 85d81525b61a085e6530c9919ed6feea4c30e5a8 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 12 Feb 2024 17:28:29 +0100 Subject: [PATCH 1/4] prevent default on Space --- packages/react/src/ActionList/Item.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index a65a10372c6..acb7e01f94d 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -229,6 +229,7 @@ export const Item = React.forwardRef( (event: React.KeyboardEvent) => { if (disabled || inactive) return if ([' ', 'Enter'].includes(event.key)) { + if (event.key === ' ') event.preventDefault() // prevent scroll on space onSelect(event, afterSelect) } }, From e7cd953febd22e25f356863c6f9a99ccf78cd4ee Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 13 Feb 2024 15:34:35 +0100 Subject: [PATCH 2/4] immediately reset defaultPrevented --- packages/react/src/ActionList/Item.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index acb7e01f94d..da4d4373df2 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -229,7 +229,11 @@ export const Item = React.forwardRef( (event: React.KeyboardEvent) => { if (disabled || inactive) return if ([' ', 'Enter'].includes(event.key)) { - if (event.key === ' ') event.preventDefault() // prevent scroll on space + if (event.key === ' ') { + event.preventDefault() // prevent scroll on space + // immediately reset defaultPrevented to not disturb control flow! + event.defaultPrevented = false + } onSelect(event, afterSelect) } }, From 496ad4f60a8d1bf5e527bf5f37395dbeaf4e9f72 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 13 Feb 2024 15:35:09 +0100 Subject: [PATCH 3/4] improve comment --- packages/react/src/ActionList/Item.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index da4d4373df2..ee6592210d7 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -230,8 +230,9 @@ export const Item = React.forwardRef( if (disabled || inactive) return if ([' ', 'Enter'].includes(event.key)) { if (event.key === ' ') { - event.preventDefault() // prevent scroll on space - // immediately reset defaultPrevented to not disturb control flow! + event.preventDefault() // prevent scrolling on Space + // immediately reset defaultPrevented once it's job is done + // so as to not disturb the functions that use that event after this event.defaultPrevented = false } onSelect(event, afterSelect) From 6328190dfb6d052575377a0f50d8ee488537a1c9 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 13 Feb 2024 15:52:35 +0100 Subject: [PATCH 4/4] Create slow-owls-report.md --- .changeset/slow-owls-report.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-owls-report.md diff --git a/.changeset/slow-owls-report.md b/.changeset/slow-owls-report.md new file mode 100644 index 00000000000..c572b98f1c2 --- /dev/null +++ b/.changeset/slow-owls-report.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionList: Prevent scroll when an item is selected with `Space`