[SOLVED] Disabling dragndrop from baseweb DnD list

Disabling dragndrop from baseweb DnD list

I actually have a drag and drop list from BaseWeb https://baseweb.design/components/dnd-list/, And instead of havings strings as the exemple shows, i'm having components for a blog, like a text section, some inputs, etc... I use this list to reorder my components easily, but i got a problem, if i want to click to go in my text input, I drag my component, and don't get in.

I'm using React-Quill for the text editor

Here's my code for the list:

                        initialState={{
                            items: componentsArray
                        }}
                        onChange={({oldIndex, newIndex}) =>
                            setComponentsArray(newIndex === -1 ?
                            arrayRemove(componentsArray, oldIndex) :
                            arrayMove(componentsArray, oldIndex, newIndex))
                        }
                        className=""
                        overrides={{
                            DragHandle: <FontAwesomeIcon icon={Icons.faLeftRight} />,
                        }}
                    />

Solution

Try cancel onmousedown BaseWeb's handler for elements you need to free of drag.

import React, { useState, useEffect, useRef } from 'react';
import { List, arrayMove } from 'baseui/dnd-list';
import { StatefulSelect } from 'baseui/select';
import { v4 as uuidv4 } from 'uuid';

const RulesTab = () => {
  const [items, setItems] = useState([{ id: uuidv4() }, { id: uuidv4() }]);
  const dndRootRef = useRef(null);

  useEffect(() => {
    // override base-web's mousedown event handler
    dndRootRef.current.addEventListener('mousedown', (el) => {
      let isFreeOfDrag = false;
      let currentEl = el.target;

      // check if the element you clicked is inside the "free-of-drag block"
      do {
        if (currentEl.getAttribute('test-id') === 'free-of-drag') {
          isFreeOfDrag = true;
          break;
        } else {
          currentEl = currentEl.parentElement;
        }
      } while (currentEl);

      // invoke el.stopPropagation(); if the element you clicked is inside the "free-of-drag block"
      if (isFreeOfDrag) {
        el.stopPropagation();
      }
    });
  }, []);

  return (
    <List
      items={items.map(({ id }, index) => (
        <div style={{ display: 'flex' }} test-id="free-of-drag" key={id}>
          <StatefulSelect
            options={[
              { label: 'AliceBlue', id: '#F0F8FF' },
              { label: 'AntiqueWhite', id: '#FAEBD7' },
            ]}
            placeholder="Select color"
          />
        </div>
      ))}
      onChange={({ oldIndex, newIndex }, el) => setItems(arrayMove(items, oldIndex, newIndex))}
      overrides={{
        Root: {
          props: {
            ref: dndRootRef,
          },
        },
      }}
    />
  );
};