Selection in contentEditable
collapses as soon as I click a button

Question

As can be seen below, instead of <button> or <input> I have used <div> to create my UI buttons. Now the problem is as soon as I click any of the buttons, the selection in the edit area (a contentEditable <div>) collapses.

Interestingly if I use <button> instead of <div> to create my UI buttons, everything works like a charm. I have seen this question asked many times before on stackoverflow, but they all use <button>. Any idea?

When you click anywhere on a page that is selectable the existing selection will collapse. — Nick, Mar 27 '22 at 02:42
This might help: https://stackoverflow.com/questions/7858725/how-to-maintain-selection-after-click-in-html — Nick, Mar 27 '22 at 02:47
@Nick Thank you Nick. Making my
buttons 'unselectable' did the trick. Would you like to put your reponse in an answer here so I can make it 'accepted' answer. Thnks again. — Joseph_Marzbani, Mar 27 '22 at 03:08

score 3 · Accepted Answer · answered Mar 27 '22 at 03:20

Your issue is that your div elements are selectable, so clicking on them automatically collapses the existing selection. You can work around this by making them "unselectable" by setting the user-select CSS property to none. This is supported in most current browsers.

Selection in contentEditable collapses as soon as I click a button

1 Answers1

Selection in contentEditable
collapses as soon as I click a button