关于在其中使用iframe相关的情况

[GJW666888]

在该组件中使用iframe标签内嵌页面时，经常会遇到拖拽结束时鼠标如果在iframe标签页面上时，继续移动鼠标(此时未点击拖拽组件)，拖拽组件的分割线依然跟着变化，没有停止

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

or

Post a link to a CodeSandbox. You can start by forking this one.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

[bxclib2]

这是由于iframe 没有on mouse up event 造成的，目前不知道咋解决，我在一个项目中也遇到了非常类似的问题

[bxclib2]

Let me translate this in English to seek help from others:

this split pane won't work well when some pane has iframe, objects or embed elements in html. According to the MDN, these elements are not interactive elements so they do not have on mouse up event. Hence, when we release the mouse inside the area of objects or embeds, the mouse event won't be triggered. Any help or ideas about the fix would be highly appreciated.

Thanks!!

[HoikanChan]

I fix this by modifying my iframe element stlye about "pointer-events" when dragging. It's quite a trouble to get the element,and I used useContext.

function SplitPaneWrapper({ className, children, ...props }: Props) {
  const [sandboxRef] = useSandboxEle();
  const onDragStarted = () => {
    sandboxRef.current.style['pointer-events'] = 'none'
  }
  const onDragFinished = () => {
    sandboxRef.current.style['pointer-events'] = 'auto'
  }
  return (
    <SplitPane
      className={className}
      defaultSize={props.defaultSize ?? '50%'}
      onDragStarted={onDragStarted}
      onDragFinished={onDragFinished}
      {...props}
    >
      {children}
    </SplitPane>
  );
}