Skip to content

The "draggable" effect does not stop after releasing the mouse button after build react project #8

@Stepashka20

Description

@Stepashka20

In dev mode <Split> works good:
https://github.com/user-attachments/assets/fa7b4c6f-251c-49eb-91b7-c2554e06050a

But when I build a project (vite build), when I click the mouse button, the mouse release is not detected and I cannot stop moving the panel.
https://github.com/user-attachments/assets/d1319fcf-cdd6-4415-bfba-e1d2e1621782

const thirdColumnRef = useRef(null);

const [thirdColumnWidth, setThirdColumnWidth] = useState(0);

useEffect(() => {
    setThirdColumnWidth(thirdColumnRef.current.clientWidth);
}, [thirdColumnRef.current]);


const [width1, setWidth1] = useLocalStorage({
    key: 'split-width-1',
    defaultValue: "33%",
});

const [width2, setWidth2] = useLocalStorage({
    key: 'split-width-2',
    defaultValue: "50%",
});


useEffect(() => {
    setThirdColumnWidth(thirdColumnRef.current.clientWidth);
}, [width1, width2]);

// ---------------------------------- //

<Split variant="dotted" knobSize="xs">
    <Split.Pane initialWidth={width1} px={12} onResizeEnd={({ width }) => setWidth1(width)}>
        <Flex direction="column" h={"100%"} w={"100%"}>
            
        </Flex>
    </Split.Pane>

    <Split.Pane initialWidth={width2} px={12} onResizeEnd={({ width }) => setWidth2(width)}>
        <Flex direction="column" w={"100%"}>
            
        </Flex>
    </Split.Pane>

    <Split.Pane px={12} grow>
        <Flex direction="column" w={"100%"} ref={thirdColumnRef}>
            
        </Flex>
    </Split.Pane>
</Split>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions