React onDragStart 不會在 Material UI 自動完成組件中觸發

Question

我已將onDragStart處理程序添加到 React Autocomplete 組件中的選項之一，但在用鼠標拖動時它不會觸發。 這是一個現場演示： https : //codesandbox.io/s/material-demo-forked-z2093?file=/demo.js

相關的一段代碼：

      renderOption={(option) => (
        <React.Fragment>
          <div
            draggable="true"
            onClick={(evt) => console.log("click")}
            onDragStart={(evt) => console.log("dragstart")}
          >
            <span>{countryToFlag(option.code)}</span>
            {option.label} ({option.code}) +{option.phone}
          </div>
        </React.Fragment>
      )}

我添加了onClick處理程序作為參考點，以顯示某些事件正在觸發。 關於如何在打開下拉菜單並開始拖動選項之一（上例中的國家/地區）時如何讓onDragStart執行某些操作的任何想法？

Answer 1

我認為問題在於 Autocomplete 在鼠標按下事件上調用preventDefault ：

    getListboxProps: () => ({
      role: 'listbox',
      id: `${id}-popup`,
      'aria-labelledby': `${id}-label`,
      ref: handleListboxRef,
      onMouseDown: (event) => {
        // Prevent blur
        event.preventDefault();
      },
    }),

這個對preventDefault阻止拖動開始。 您可以通過停止鼠標按下事件的傳播來避免對preventDefault ，但是（如 Material-UI 代碼中的注釋所示）當您單擊一個選項並且列表框關閉時會發生模糊（這也阻止了從開始的阻力）。

這是一個沙箱，它允許通過停止鼠標按下事件的傳播並強制自動完成保持打開狀態（ open={true} ）來觸發 onDragStart 。 我不建議將此作為一種行動方案，因為它會導致自動完成行為異常，但它至少表明需要克服哪些障礙才能使拖動工作。 我認為沒有任何簡單的方法可以在不破壞自動完成功能的情況下讓拖動工作。