diff --git a/.changeset/nasty-toys-raise.md b/.changeset/nasty-toys-raise.md new file mode 100644 index 00000000000..f5de304e8ff --- /dev/null +++ b/.changeset/nasty-toys-raise.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": patch +--- + +Future Select - stop propagation when selecting an option using a touch device. diff --git a/packages/components/src/__future__/Select/_docs/Select.stories.tsx b/packages/components/src/__future__/Select/_docs/Select.stories.tsx index 135e6280291..45dcb170b58 100644 --- a/packages/components/src/__future__/Select/_docs/Select.stories.tsx +++ b/packages/components/src/__future__/Select/_docs/Select.stories.tsx @@ -1,5 +1,6 @@ import React from "react" import { Meta, StoryObj } from "@storybook/react" +import { RadioField, RadioGroup } from "~components/Radio" import { Select } from "../Select" import { SelectOption } from "../types" import { @@ -26,6 +27,10 @@ const meta = { args: { label: "Label", items: singleMockItems, + onFocus: undefined, + onFocusChange: undefined, + onOpenChange: undefined, + onSelectionChange: undefined, }, parameters: { actions: { @@ -190,3 +195,45 @@ export const PortalContainer: Story = { }, parameters: { docs: { source: { type: "code" } } }, } + +export const TouchDeviceTest: Story = { + name: "Touch Device Pointer Event (Manual Test)", + render: args => { + const [selected, setSelected] = React.useState("radio-1") + return ( +
+ On touch devices, the radios below were changing when selecting an
+ option sitting above it.
+
+ At this time, we could not automate this test, so this story exists
+ for manual testing.
+