diff --git a/.changeset/silver-geese-notice.md b/.changeset/silver-geese-notice.md new file mode 100644 index 00000000..f1f7b1de --- /dev/null +++ b/.changeset/silver-geese-notice.md @@ -0,0 +1,5 @@ +--- +"reshaped": patch +--- + +Fix Slider to trigger `onChangeCommit` when changing values via keyboard interactions. \ No newline at end of file diff --git a/packages/reshaped/src/components/Slider/SliderControlled.tsx b/packages/reshaped/src/components/Slider/SliderControlled.tsx index c3b6488f..01d69a54 100644 --- a/packages/reshaped/src/components/Slider/SliderControlled.tsx +++ b/packages/reshaped/src/components/Slider/SliderControlled.tsx @@ -138,6 +138,11 @@ const SliderControlled: React.FC = (props) = // @ts-ignore if (options.commit) onChangeCommitRef.current?.(args); + // Keyboard changes should commit immediately + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + if (options.native && !draggingId) onChangeCommitRef.current?.(args); + // Manually controlled resolving of single/range handlers // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -145,7 +150,7 @@ const SliderControlled: React.FC = (props) = triggerChangeEvent(minInputRef.current!, value.toString()); }, - [maxValue, name, minName, maxName, range, onChangeCommitRef, onChangeRef] + [range, maxValue, name, minName, maxName, draggingId, onChangeCommitRef, onChangeRef] ); const handleMaxChange: T.ThumbProps["onChange"] = React.useCallback( @@ -159,6 +164,11 @@ const SliderControlled: React.FC = (props) = // @ts-ignore if (options.commit) onChangeCommitRef.current?.(args); + // Keyboard changes should commit immediately + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + if (options.native && !draggingId) onChangeCommitRef.current?.(args); + // Manually controlled resolving of single/range handlers // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -166,7 +176,7 @@ const SliderControlled: React.FC = (props) = triggerChangeEvent(maxInputRef.current!, value.toString()); }, - [minValue, name, minName, maxName, range, onChangeRef, onChangeCommitRef] + [range, minValue, name, minName, maxName, onChangeCommitRef, draggingId, onChangeRef] ); const handleMouseDown = ({ nativeEvent }: React.MouseEvent | React.TouchEvent) => { diff --git a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx index cbfe8260..7f999e35 100644 --- a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx +++ b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx @@ -208,6 +208,10 @@ export const defaultValue: StoryObj<{ expect(args.handleChange).toHaveBeenCalledTimes(1); expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" }); + + expect(args.handleChangeCommit).toHaveBeenCalledTimes(1); + expect(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" }); + expect(input).toHaveValue("51"); }, }; @@ -240,6 +244,10 @@ export const value: StoryObj<{ expect(args.handleChange).toHaveBeenCalledTimes(1); expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" }); + + expect(args.handleChangeCommit).toHaveBeenCalledTimes(1); + expect(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" }); + expect(input).toHaveValue("50"); }, }; @@ -282,6 +290,15 @@ export const rangeDefaultValue: StoryObj<{ maxName: "test-name", }); + expect(args.handleChangeCommit).toHaveBeenCalledTimes(1); + expect(args.handleChangeCommit).toHaveBeenCalledWith({ + minValue: 51, + maxValue: 70, + name: "test-name", + minName: "test-name", + maxName: "test-name", + }); + expect(minInput).toHaveValue("51"); expect(maxInput).toHaveValue("70"); }, @@ -325,6 +342,14 @@ export const rangeValue: StoryObj<{ maxName: "test-name-max", }); + expect(args.handleChangeCommit).toHaveBeenCalledTimes(1); + expect(args.handleChangeCommit).toHaveBeenCalledWith({ + minValue: 51, + maxValue: 70, + minName: "test-name-min", + maxName: "test-name-max", + }); + expect(minInput).toHaveValue("50"); expect(maxInput).toHaveValue("70"); },