Stop movimentation when i drag for the right or left the mouse in text of my plugin input

[JulioVianaDev]

Is your feature request related to a problem? Please describe.

I create one InputPlugin, to create one caption to each slide, all work, but i need when i click in text of input and drag to left or right the yarl__swipe_offset value change. i want know if have one method to disable the change slides by drag to left right when i want, to disable

My codes:

LightBoxGallery
https://gist.github.com/JulioVianaDev/b7073be0d6f1c1d15d15ea78ff139e7a

InputEditCaption.tsx
https://gist.github.com/JulioVianaDev/6e3a8d769da5b75bf610823a16641a6d

[igordanchenko]

To prevent slide navigation in this case, you need to stop propagation of the following events on your topmost div element:

• onPointerDown
• onKeyDown
• onWheel

const stopPropagation = (event) => {
  event.preventDefault();
  event.stopPropagation();
};

<div
  onPointerDown={stopPropagation}
  onKeyDown={stopPropagation}
  onWheel={stopPropagation}
  // ...
/>

[JulioVianaDev]

I can stop the controllerRef when i down? Example when input is focus controller dont change more the value of yarl__swipe_offset.?

[igordanchenko]

I'm not sure I understand your question. The following change in your InputEditCaptions component should address the issue you are seeing.

const stopPropagation = (event) => {
  event.preventDefault();
  event.stopPropagation();
};

return (
  <div
    className="d-flex flex-column "
    style={{
      position: "absolute",
      bottom: "50px",
    }}
    onPointerDown={stopPropagation}
    onKeyDown={stopPropagation}
    onWheel={stopPropagation}
  >

[JulioVianaDev]

Works to dont more change for the sides but with this i cant more click in input or type of there or focus

[igordanchenko]

Can you provide a working example on CodeSandbox?

[JulioVianaDev]

Oh works, now, the problem was, because the textAreaRef lose the focus, so i put when i click on div send focus to textArea

[JulioVianaDev]

onClick={(e) => inputRef.current?.focus()}