cant click input area

[Kaan Acar]

<ScrollContainer className="container" nativeMobileScroll={true} onClick={(...args) => { console.log('onClick', args) }}>

                        <Form>

                            <Row>

                                <Col>
                                    <FormGroup>
                                        <Label for="exampleEmail">Role Adı</Label>


                                        <Input
                                            type="text"
                                            name="roleName"
                                            id="roleName"
                                            placeholder="Role Adı Belirleyiniz!"
                                            value={this.state.roleName}
                                            onChange={this.setOnChange}
                                        />


                                    </FormGroup>
                                </Col>

                            </Row>

                            <Button block size="lg" onClick={this.onSubmit}  >Rolü Oluştur</Button>
                        </Form>

                    </div>
                </ScrollContainer>

input cant click and focus so cant typing text

[Norserium]

Hello, @messcall! What's the version of the package do you use?

[Kaan Acar]

react-indiana-drag-scroll@1.6.1

[Norserium]

Could you provide sandbox that reproduces your problem? I can't reproduce it (my sandbox).

[Kaan Acar]

ı use ScrollContainer like at your sandbox code,
ı think that some css codes ı have wrote, reasons this problem.if ı solve,ı will notify here.

[Kaan Acar]

thanks for ur help u have shown

[Norserium]

I've reproduced it. Alas, it's a pretty tough situation.

When you, for example, click on an element I don't know will you scroll the container or not. It depends on your further interactions. So I should prevent default behavior (i.e. click), because scrolling should not be messed with clicks and other interactions.

Me need to investigate how to solve this problem. I see two pretty optimal solutions now:

1. Add input tag to ignoreElements prop. It will disable scrolling for elements with tag input (feel free to set any selector here).
2. Add custom handler in onClick prop:

handler(event) {
   if (event.target.focus) {
       event.target.focus();
   } else {
       event.target.click();
   }
}

Maybe I should make the second approach default for all clicks, that don't initiate scroll. But me need time to decide.

[Kaan Acar]

.... => ... ignoreElements={Input} .... => solved problem...

[Norserium]

I close this issue now. Maybe in the future I will return to this issue, but I don't want to make this library more complicated right now.