Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 9 years ago
Reactions:1
Comments:15 (5 by maintainers)

Top GitHub Comments

3reactions

vlasovmichaelcommented, Jan 20, 2017

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

0reactions

Toolmastercommented, Jul 5, 2016

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

Top Results From Across the Web

Firefox contenteditable cursor issue - Stack Overflow

This CSS solution actually works. Caret position sets to the end, text can selected and everything works as expected.

select tags in contentEditable can't be selected for removal

First, fixes the caret movement getting stuck on a <select> element inside an editor. This is because of the IsRootOfAnonymousSubtree() check that I'm...

The autofocus attribute - HTML Standard - whatwg

Being focusable is a statement about whether an element can be focused programmatically, e.g. via the focus() method or autofocus attribute. In ...

Safari Technology Preview Release Notes - Apple Developer

Ignored <option> element while building accessibility tree when <select> is hidden ... Fixed text selection on flex and grid box items (254602@main) ...

The HTML5 contenteditable attribute - Maxime Euzière

The contenteditable attribute makes any HTML element editable with the mouse and/or the keyboard. ... click on this paragraph to edit the text...