React-grid-layout: Input is not accessable in dragn drop

[holzfelix]

Thanks for submitting an issue to RGL!

Please mark the type of this issue:

• [x] Bug
• [ ] Feature Request
• [ ] Question

When I add input fields into a draggable object I'm not able to type into the inputs with an onchange handler.

What could be the problem?

[SchroederChris]

I just encountered the same issue. If you don't need dragging on the complete grid element, you can specify a css selector as the grid-layout's draggableHandle property. That way, dragging doesn't influence the rest of your element. I didn't dig deeper to find out what exactly happens that breaks the input though.

[holzfelix]

@SchroederChris can you maybe show a code snipped how you use draggableHandle.

I tried this: draggableHandle={panel} as attribute on ResponsiveReactGridLayout ... but full div is draggable and not onle the class called panel

[SchroederChris]

It's just a string property where you specify a regular css selector. My code looks like this:
draggableHandle=".card-view > header"

[jog39]

@holzfelix did you manage to make it work? I found that the example with draggableHandle doesn't work (you can drag from anywhere inside your GridItem) and thus the input is still bugged.

[holzfelix]

yes it works now.

this worked for me:

draggableHandle=".dragMe"

and my trag item in the dragable opject

<div className={`col-md-6`}>
                                {/*----------- Process Title --------------*/}
                                <div className={`row`}>
                                    <div className="col-md-12">
                                        <TooltipLink className={`dragMe`} tooltip={t('processes:new.move')}>
                                            <span className="fa fa-arrows-alt"/>
                                        </TooltipLink>
                                    </div>
                                </div>
                            </div>

[jog39]

Not working for me, my item is:

<div key="param" data-grid={{x: 0, y: 0, w: 2, h: 2, draggableHandle: ".drag-handle"}} >
                        <span className="drag-handle">Drag Here</span>
                        <br/>
                        <label>Name :<input type="text"/></label>
                    </div>

The whole item remains draggable and input don't keep focus..

[holzfelix]

for me that looks not correct!

why do you add those stuff to a div?
you have to call the react component

 <ResponsiveReactGridLayout className={`layout`}
                                                           breakpoints={{
                                                               lg: 0,
                                                           }
                                                           }
                                                           cols={{
                                                               lg: 12,
                                                           }
                                                           }
                                                           layouts={this.state.layouts}
                                                           draggableHandle=".dragMe"
                                                           onBreakpointChange={this.onBreakpointChange}
                                                           onResizeStop={this.onResize}
                                                           onLayoutChange={this.onLayoutChange}>
                                    {

and inside the react component you have elements with css class

[jog39]

I got it working, thanks. I was following the example which does it the way I showed it (directly on layout or item properties).

[hedibertosilva]

thanks, it worked for me.

[Distil62]

It's work for me too thanks !

[renakim]

It's working! Thanks!

[yousefkhan]

You can also use draggableCancel=".dontDragMe"
For me it was more appropriate.

[fesaza]

Using the draggableHandle property fixed if you don't need draggable behaviour. How can I fix that if I need my component to be draggable? Thanks in advance

[balatvm]

My component has input field and this component needs to be draggable. any solution?
Currently it's working. (unable to type in in the input box)

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days