Fix (Global Colors): fix dragging in color picker (#3590)

* fix dragging

* fix Coderabbit's QA

Author: kaeizen

src/components/sortable-picker/index.js

@@ -17,7 +17,9 @@ import {
 	Dashicon,
 	Dropdown,
 } from '@wordpress/components'
-import { useState, useEffect } from '@wordpress/element'
+import {
+	useState, useEffect, forwardRef,
+} from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { ResetButton } from '../base-control2/reset-button'
 
@@ -43,7 +45,7 @@ const DRAG_KEYCODES = {
 	down: [ 40, 39 ],
 }
 
-const SortablePicker = props => {
+const SortablePicker = forwardRef( ( props, ref ) => {
 	const {
 		nonSortableItems = [],
 		editableName = true,
@@ -54,7 +56,6 @@ const SortablePicker = props => {
 		handleAddItem,
 		onSortEnd,
 		AddItemPopover = null,
-		ref,
 		enableAddItem = true,
 	} = props
 	const [ isSorting, setIsSorting ] = useState( false )
@@ -133,7 +134,7 @@ const SortablePicker = props => {
 			</div>
 		</BaseControl>
 	)
-}
+} )
 
 SortablePicker.defaultProps = {
 	className: '',

src/plugins/global-settings/colors/color-picker.js

@@ -24,6 +24,19 @@ import { ColorIndicator, ColorPicker } from '@wordpress/components'
 
 let saveTimeout = null
 
+const ItemPickerColor = ( { item, onChange } ) => {
+	return <div className="stk-color-palette-control__popover-content">
+		<ColorPicker
+			onChange={ value => onChange( {
+				...item,
+				color: value,
+			} ) }
+			color={ item.color }
+			enableAlpha={ true }
+		/>
+	</div>
+}
+
 const ColorPickers = props => {
 	const ref = useRef()
 	const {
@@ -134,19 +147,6 @@ const ColorPickers = props => {
 		/>
 	}
 
-	const ItemPicker = ( { item, onChange } ) => {
-		return <div className="stk-color-palette-control__popover-content">
-			<ColorPicker
-				onChange={ value => onChange( {
-					...item,
-					color: value,
-				} ) }
-				color={ item.color }
-				enableAlpha={ true }
-			/>
-		</div>
-	}
-
 	return (
 		<SortablePicker
 			ref={ ref }
@@ -157,7 +157,7 @@ const ColorPickers = props => {
 			handleAddItem={ handleAddIcon }
 			onSortEnd={ onSortEnd }
 			ItemPreview={ ItemPreview }
-			ItemPicker={ ItemPicker }
+			ItemPicker={ ItemPickerColor }
 			{ ...props }
 		/>
 	)