From 4cce677434e624f03dc79932a7f9910973bbf3a5 Mon Sep 17 00:00:00 2001 From: gitstart Date: Thu, 18 May 2023 06:28:01 +0000 Subject: [PATCH] fix: color control buggy Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com> --- code/ui/blocks/src/controls/Color.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx index b126c80e3b2d..7d3e2806a7b5 100644 --- a/code/ui/blocks/src/controls/Color.tsx +++ b/code/ui/blocks/src/controls/Color.tsx @@ -2,7 +2,7 @@ import type { FC, ChangeEvent, FocusEvent } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful'; import convert from 'color-convert'; -import throttle from 'lodash/throttle.js'; +import debounce from 'lodash/debounce.js'; import { styled } from '@storybook/theming'; import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components'; @@ -309,10 +309,10 @@ export const ColorControl: FC = ({ presetColors, startOpen = false, }) => { - const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]); + const debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]); const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput( initialValue, - throttledOnChange + debouncedOnChange ); const { presets, addPreset } = usePresets(presetColors, color, colorSpace); const Picker = ColorPicker[colorSpace];