Slick: FireFox, input not showing text cursor when clicked

Created on 8 Nov 2016  路  10Comments  路  Source: kenwheeler/slick

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

  • Which browsers/versions does it happen on?
    FireFox on windows
  • Which jQuery/Slick version are you using?
    jquery-1.12.4
    slick /1.6.0
Investigating A11Y

Most helpful comment

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

All 10 comments

any updates on this? i have the same problem

?

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

Anyone find any fix?

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

Hi ahm-3d,

Thanks for you explanation.

Any change you can post your solution?

fiddle.zip

this should get you started

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

@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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yangkennyk picture yangkennyk  路  3Comments

xtatanx picture xtatanx  路  3Comments

ericestes picture ericestes  路  3Comments

stephane-r picture stephane-r  路  3Comments

VladPoe picture VladPoe  路  3Comments