关于在其中使用iframe相关的情况 about react-split-pane

[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>
  );
}