Cell is moveable when html textarea inside is focused

[abdullahbaa5]

Describe the bug

I want to disable cell moving when inner html textarea or input is clicked and moved.

I have tried using events such as node:move, and preventDefault the mouse event but it still moves.

i have tried the interacting dynamic nodeMoveable:

newGraph({ 
  interacting:{ 
    nodeMovable(view){ 
      const canMove = $(`[data-cell-id="${view.cell.id}"]`)
		.find("textarea")
		.filter((element) => {
			return $(element).is(":focus");
		});

	return canMove.length === 0;
    },
  },
})

but nodeMovable is only called before the node is clicked once, not while the node is moving.

Your Example Website or App

Cell is moveable when html textarea inside is focused

Steps to Reproduce the Bug or Issue

Shape html code:

X6.Shape.HTML.register({
	shape: AGENT_SCRIPT_NODE_TYPES.USER_QUERY,
	width: AGENT_SCRIPT_NODE_WIDTH,
	height: AGENT_SCRIPT_NODE_MIN_HEIGHT,
	effect: [],
	ports: {},
	html(cell) {
		const div = document.createElement("div");
		div.className = `agent-script-node ${AGENT_SCRIPT_NODE_TYPES.USER_QUERY}`;

		const data = cell.getData() || {};
		const currentLanguage = agentsScriptManagerLanguageDropdown.getSelectedLanguage().id;

		div.innerHTML = `
              <div class="agent-script-node-header">
                  <div class="d-flex align-items-center btn-ic-span-align">
                      <i class="fa-regular fa-message me-2"></i>
                      <span>User Query</span>
                  </div>
                  <div class="node-actions">
                      <button class="btn btn-light btn-sm me-2" data-action="configure-user-query">
                          <i class="fa-regular fa-gear"></i>
                      </button>
                      <button class="btn btn-danger btn-sm" data-action="delete-node">
                          <i class="fa-regular fa-trash"></i>
                      </button>
                  </div>
              </div>
              <div class="agent-script-node-content">
                  <div class="agent-script-node-input-group">
                      <textarea 
                          class="form-control" 
                          placeholder="Type the user query..."
                          data-input="user-query"
                          rows="3"
                      >${data.query?.[currentLanguage] || ""}</textarea>
                  </div>
              </div>
          `;

		setTimeout(() => {
			updateAgentScriptGraphNodeSize(cell, div);
		}, 10);

		return div;
	},
});

Expected behavior

not move the graph or node when clicked on textarea or input and be able to drag text inside the element.

Screenshots or Videos

https://gyazo.com/af363f1f174f4dfe7e710994da7dd385

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 2.11.1]

Additional context

No response

[x6-bot]

👋 @abdullahbaa5

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.