From a0dbde5c6004133b0acf4cc400b96da8e172a1f3 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:47:01 -0500
Subject: [PATCH] Organize fields transformation: Fix re-ordering of fields
 using drag and drop (#77172)

drag handler as html element
---
 .../editors/OrganizeFieldsTransformerEditor.tsx        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
index cfaf2bd64ab..b0f61a88dba 100644
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@@ -134,13 +134,9 @@ const DraggableFieldName = ({
         <div className="gf-form-inline" ref={provided.innerRef} {...provided.draggableProps}>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--justify-left width-30">
-              <Icon
-                name="draggabledots"
-                title="Drag and drop to reorder"
-                size="lg"
-                className={styles.draggable}
-                {...provided.dragHandleProps}
-              />
+              <span {...provided.dragHandleProps}>
+                <Icon name="draggabledots" title="Drag and drop to reorder" size="lg" className={styles.draggable} />
+              </span>
               <IconButton
                 className={styles.toggle}
                 size="md"