react-map-interaction icon indicating copy to clipboard operation
react-map-interaction copied to clipboard

TextArea is not focusable inside MapInteraction

Open andriadze opened this issue 6 years ago • 2 comments

I think the problem is with preventDefault-s onMouseDown/Up, but I'm not sure.

To reproduce: add textarea inside MapInteraction component

I did it with provided example project.

andriadze avatar Sep 30 '19 13:09 andriadze

You can solve this by creating a event handler on the textarea for mousedown that calls stopPropagation. This handler needs to be created as a native jandler with 'AddEventListner' as react event handlers are ran after native ones.

ghost avatar Oct 24 '19 11:10 ghost

Yeah that is one workaround. But it fails for me in couple of cases. For example there are some components that simply don't expose enough for me

I've found following in the sources:

/*
    Event handlers
    All touch/mouse handlers preventDefault because we add
    both touch and mouse handlers in the same session to support devicse
    with both touch screen and mouse inputs. The browser may fire both
    a touch and mouse event for a *single* user action, so we have to ensure
    that only one handler is used by canceling the event in the first handler.
    https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
  */

This is probably what's causing my issues. Easiest solution for me in this case was to remove those preventDefault-s since I don't really care about mobile. But, I believe that is a very rough solution.

andriadze avatar Oct 24 '19 21:10 andriadze