react-dates: SingleDatePicker focus problems on touch devices

@majapw would still consider this an issue. The current feature detection for touch devices (readOnly & isTouchDevice) is not sufficient, and isTouchDevice returns a false positive in Chrome on Mac + PC, causing the date picker’s input field to not be editable with the keyboard on Desktop.

Probably don’t want to import an entire library like Modernizr for this, but maybe we can copy what they’re doing for the default behavior: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

Otherwise, there should be a way for the user to control this logic, as device detection tends to be a controversial topic and everyone has their own way of doing things. It would be nice if we could set the isTouchDevice prop as a function that contained our own logic.

I would be willing to draft a PR to test either the Modernizr-style touch detection or the getting isTouchDevice working as a prop that accepts a function, but would like to hear some suggestions.

@majapw Probably, I’ll put together a PR later today.

@erin-doyle I think the problem is if we’re not using touch, we usually end up using user-agent, which is unreliable.

@comron @ljharb Perhaps we should have a prop to allow the consumer to specify the behavior they want or maybe we should be relying on screen-size instead (that’s generally how we select mobile devices at airbnb, although devices like the iPad prop make it a bit difficult).

btw the code for isTouchDevice is here — https://github.com/airbnb/is-touch-device/blob/master/src/index.js

It doesn’t look like there is anyway to get focus back to the input. The code seems to steal focus from the input whenever it gains focus if isTouchDevice is true.

I think the problem here is that “touch device” is too broad of a check, and specifically not allowing a user to type into the field if their browser responds to ‘ontouchstart’ seems overly strict. In this case the user doesn’t even know they have a touch device, it just happens to be a PC with a keyboard and mouse and a touch monitor. The user expects this form to work like any other web input, especially when typing specific far-future dates typing is the most intuitive interaction.

I think you’re idea about only forcing the focus when presenting the DatePicker in a portal because of screen size is the better idea. At a minimum it would be nice to be in control of this behavior, even if the default doesn’t change.

The “keepFocusOnInputs” is something I’m still working on. It’s still needed, I just have been caught up with other items and haven’t been able to push anything up.

On Tue, Jan 9, 2018 at 6:08 AM Erin Doyle notifications@github.com wrote:

Should we close this then?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/react-dates/issues/747#issuecomment-356293566, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHuQSWMcZ7fBYicVlbtwT7Upozx03KOks5tI3LNgaJpZM4Pv2wU .

@majapw I’ll investigate and let you know, thanks for all your help.

Okay, I would add a prop named something like keepFocusOnInput(s) and then have that short-circuit the focus movement when true. @comron would that work for you?

There is no way to short-circut this logic

Perhaps we should have a prop

I think indeed that providing a way for the user to override this default logic is the simplest way forward.

We should be detecting features, not sniffing user agents - “mobile” isn’t a feature, while “touch” is.