Blinking cursor in mobile

[narmadham]

Hi,

I am using SingleDatePicker with portal option. Once the portal is closed the focused sets back to the input again. It doesnt create a problem in desktop but in mobile I am gettting a blinking cursor. I am able to replicate in the examples as well.

Is there any way to avoid the blinking cursor ?

[jonathanong]

I am seeing the same issue and it is messing up my vertical mobile layout. here's what happens immediately after clicking a date input:

I can only get the correct layout when pressing "done"

[jonathanong]

this may relevant to #246

[narmadham]

Hi @jonathanong Ya it is almost similar. I tried blurring out after date change but no luck. Facing lot of minor issues which are creating an impact. Its only on mobile Safari. desktop version works great.

[amlivingamliving]

Hi @jonathanong and @narmadham - I'm having the same issue. It does look similar to #246 . This is with withPortal set to true on my SingleDatePickerWrapper. In the screenshot, you can see a sliver of the datepicker calendar up top. Pressing 'OK' corrects the UI.

[jurekbarth]

I think its a bug with the readonly attribute on an input field. Safari iOS still triggers focus even if readonly is set.
You can test yourself here: http://codepen.io/jurekbarth/pen/PWpEQv

[jurekbarth]

For a temporary workaround you could set the disabled attribute like so disabled={disabled || this.isTouchDevice} in DateInput.jsx

[dominicchapman]

@jurekbarth it looks like a change was made back in November having been tested on Surface Tablet, not iOS #174 – thanks for the workaround

[narmadham]

thanks @jurekbarth this workaround really helped me.

[Nehlin]

@jurekbarth Not getting the workaround to work. It's setting the disabled flag to true permanently for ios, right? If so how does that help?

[jurekbarth]

@Nehlin how are you trying to solve it? Did you change the file in your node_modules folder? If so thats not the way to go, because your bundler catch up the already processed file in the lib folder. You have to bundle the files first and the use it. Or if you want to you can use this already compiled file (https://gist.github.com/jurekbarth/03382417dd7d3c79ab255dfe69615d04) and replace it in node_modules/react-dates/lib/components/DateInput.js Hope this helps :)

[majapw]

This should be fixed in v6.0.2! (Hopefully Definitely. Thanks, @moonboots. :P)

[jurekbarth]

@majapw Sure now it's not blinking anymore, but it's still not working as expected.

Thats how it looks like with the fix applied. You still have to click "Done" or in German "Fertig" to get things working properly.

The desired outcome would be:

It's an iOS Bug :/ Is there some hacky way to just detect iOS devices?

[majapw]

@moonboots what kind of device were you testing on?

There's def hacky ways to detect iOS and we can go there if that's necessary, but I don't know if this happens on all iOS devices even. What version of iOS/Safari are you using?

[moonboots]

I'm on an iphone with iOS 10. In the datepicker setup we're working on, the "Done" button still appears but doesn't throw off the layout or behavior. @jurekbarth, in your example, is focusedInput set to null after a user taps a date? If the desired behavior is closing the portal/SingleDatePicker after date selection, this.setState({ focsedInput: null }); should remove lingering focus.

@majapw We could consider swapping <input> tags with <div> on touch devices. However, there are probably accessibility concerns we'd need to address.

[NickTiut]

@majapw I also get the same behaviour with the "Done" button appearing. The fade out from the portal appears, but only after I press "Done" I get the DateRangePicker. Setting the props for input with class "DateInput__input" to disabled for mobile (in componentDidUpdate) used to work in version 4.3.0 but for versions higher than that its useless. iOS 9.3.2.

[majapw]

Let's continue tracking this issue in #246

[rencarKYS]

i find resolve

caret-color: transparent;