Slick: Text in contenteditable elements inside slides can't be selected (in Firefox)

[pstuifzand]

What happens

The text inside a contenteditable div can't be selected, clicked or moved around with the arrow keys.

What should happen

Elements with contenteditable elements shouldn't be affected by using it in the page of the carousel.

Why

There is a -moz-user-select: none rule in the CSS files that applies to everything inside the whole carousel. This overrides the default value for elements with contenteditable=true.

Proposed solution

Add another rule with something like this:

.slick-slider [contenteditable] {
     -moz-user-select: text; // or all or something...
}

[kenwheeler]

I like the cut of your jib. However, its such an edge case, I'm not sure it merits inclusion. That said, I'll leave this here and let the +1's decide.

[pstuifzand]

Maybe not a fix, but at least a mention in the docs that you use user-select.

[wldcordeiro]

:+1:

[kenwheeler]

Adding to the next round of docs

[dvuke]

I'm a little late to the party - but is there a way to make a text input field have text that is selectable? Pretty much describing the behavior outlined in the first comment.... It may be a fringe case, but we're currently using the carousel to display tiles of configurable items; clicking on labels toggles input fields to allow changing values, but we lose the 'feel' of an input field at that point - we can't select and highlight text in the inputs to delete, etc..

Thanks for any input.

[kenwheeler]

Can you just remove the css that blocks it? I only put it in so it didn't get annoying when drag swiping. Removing the user-select from slick.css should sort that out

[dvuke]

Thanks for the quick response - so after a little research and using the DOM Inspector - it looks like Chrome already overrides the user-select to "text" regardless of the styles coming from slick.css. I'm able to 'select' text in the input by doing actions like double-clicking on the text in the input, but if i wanted to click on a portion of the text and drag to highlight the text, the carousel kicks in and starts to swipe instead of allowing me to select portions of the text.

Is there a way to have the inputs be ignored from the click and drag listening of the carousel?

[kenwheeler]

I'll do some testing and see what I can dig up. I'm at a super bowl party, knuckle deep in buffalo wing sauce so I might not have an answer until tomorrow night.

[dvuke]

haha - understandable.

[CRodriguez25]

Has this been resolved? I love slick, but I'm running into the very issue that's been described. I have a textbox in the carousel, and I'm unable to highlight text without the carousel kicking in.

[ethanclevenger91]

To anyone reading this - I would _overwrite_ the slick styles in your own css rather than edit slick's CSS...to maintain upgradability

[simondrabble]

This is a requirement for me also. Have a form that is too large to display all of the fields at once, so its broken into three slides. Unfortunately even setting -moz-user-select (or equivalent) doesn't seem to affect the behavior of the carousel when selecting text.

[twentyfortysix]

draggable: false,
swipe: false,
swipeToSlide:false,

and still cannot select the text ;(

Is there any workaround?

update: say your text lays inside .entry
.slick-slider { .entry { -moz-user-select: text; // or all or something... cursor: auto !important; -webkit-user-select: auto !important; -moz-user-select: auto !important; } }

[Toolmaster]

Any progress on this issue?
@twentyfortysix - Can you explain in further detail how you made your workaround work?

[vlasovmichael]

input{
&:focus{ position: relative; }
}