kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.52k stars 5.88k forks source link

FireFox, input not showing text cursor when clicked #2597

Open adam4h opened 7 years ago

adam4h commented 7 years ago

Slick slider in FireFox, input not showing text cursor when clicked.

===================================================================

Find code here: http://jsfiddle.net/shraga/x6f4L56v/8/

====================================================================

Steps to reproduce the problem

1) open firefox on windows (did not test of mac) 2) open this code and test: http://jsfiddle.net/shraga/x6f4L56v/8/

===================================================================

What is the expected behavior?

When you click in the input you will see the text cursor blinking: image

===================================================================

What is observed behaviour?

When you click in the input you will NOT see the text cursor blinking: image

More Details

ahm-3d commented 7 years ago

any updates on this? i have the same problem

adam4h commented 7 years ago

?

jackfuchs commented 7 years ago

Same here in FF on mac. Does anyone have found a temporary solution to this?

adam4h commented 7 years ago

Anyone find any fix?

ahm-3d commented 7 years ago

i am also using FF on a mac.

i kind of found 2 workarounds to this:

1- by adding a transparent element that overlays the input field. then added a click event on the overlay that will hide it self and trigger $('#input_id').focus();

2- as mentioned above but unslick your slider then slick it again before triggering the focus() note before that by unslicking and slicking your slider, your slider will reset to the first slide which your input field may or may not be on. before unslicking your slider, you will need to set a variable that remembers the current slider position so you can use the slickGoTo after you slick your slider again.

However once you click out of the input field, you will run to the same problem again, therefore you will need to unhide the element that overlays the input at this point. perhaps use the blur() function (untested)

hope that helps

adam4h commented 7 years ago

Hi ahm-3d,

Thanks for you explanation.

Any change you can post your solution?

ahm-3d commented 7 years ago

fiddle.zip

this should get you started

theurere commented 6 years ago

Here is a fork of the fiddle provided by @adam4h with a possible solution.

Ridder90 commented 6 years ago

@theurere thanks for your fiddle. The position absolute creates some flickering in the UI. I changed the position to relative and that seems to work to, but without the flickering.

ad1992 commented 5 years ago

@adam4h @Ridder90 the solution helped and saved a lot of time. Thanks 👍