The selection box does not appear when you drag the mouse?

[HsienW]

When the mouse is dragged selection box does not appear but the console.log will appear normally

Here is my test code:

import React from 'react';
import {SelectableGroup} from 'react-selectable-fast';
import MenuExampluItem from './MenuExampluItem';

const array = [
    {
        name: '123',
        key: 1
    },
    {
        name: '456',
        key: 2
    },
    {
        name: '888',
        key: 3
    },
    {
        name: '777',
        key: 4
    }
];
export default class MenuExampleNested extends React.Component {
    constructor() {
        super();
        this.state = {
            isGlobal: true
        };
    }

    handleSelecting() {
        console.log('Drag');
    }

    handleSelectionClear() {
        console.log('Clear');
    }

    handleSelectionFinish() {
        console.log('Finish');
    }

    render() {

        return (
            <SelectableGroup
                allowClickWithoutSelected={false}
                duringSelection={this.handleSelecting}
                onSelectionClear={this.handleSelectionClear}
                onSelectionFinish={this.handleSelectionFinish}
                className="app-test"
                clickClassName="tick"
                globalMouse={true}
            >
                {
                    array.map((Obj) => {
                        return (
                            <MenuExampluItem
                                key={Obj.key}
                                name={Obj.name}
                            />
                        );
                    })
                }
            </SelectableGroup>
        );
    }
}

import React from 'react';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {createSelectable} from 'react-selectable-fast';

const MenuExampluItem = ({selectableRef, name}) => {
    return (
        <div ref={selectableRef}>
            <MuiThemeProvider>
                <Paper style={{width: '300px'}}>
                    <Menu>
                        <MenuItem primaryText={name} disabled={true}/>
                    </Menu>
                </Paper>
            </MuiThemeProvider>
        </div>
    );
};

export default createSelectable(MenuExampluItem)

[valerybugakov]

@qwe75300 do you have styles somewhere for .selectable-selectbox?

[HsienW]

No i only use material .selectable-selectbox it's essential?

[valerybugakov]

@qwe75300 This package doesn't provide any styles out of the box, that's why selectbox isn't visible.

[HsienW]

I was wrong i mean rag the mouse dotted line box not selection box

[valerybugakov]

@qwe75300 so you don't see dashed line when selecting, right? Try adding styles like this to your app

.selectable-selectbox {
  z-index: 9000;
  position: absolute;
  cursor: default;
  background: none;
  border: 1px dashed grey;
}

[HsienW]

Should be selected to be dotted line but my operation did not appear, I want dotted line to know what the current selected the to item

[valerybugakov]

Have you tried adding CSS I mentioned above? Do you see any error messages in the console? Would be nice to have an example repo with this behaviour.

[valerybugakov]

Hey @qwe75300, is this issue still a thing?

[valerybugakov]

Closing this due to inactivity.