I've been working on preventing accidental text selection and native image dragging in Perspective for customers who use Ignition Perspective as HMI, particularly when interacting with buttons, read-only texts, images, and embedded views.
I wanted to disable these behaviors across the application without interfering with normal component interactions, especially input fields and buttons.
I also added an exception for cases where text selection is actually needed. Setting a component's Meta → DOM ID to something starting with drag-allowed (e.g., drag-allowed-texts) excludes that element and its descendants from the global restrictions.
One thing I wanted to avoid was applying pointer-events: none directly to Perspective components, since that could interfere with their normal behavior. Instead, I limited it to the internal image and SVG elements.
Just sharing what I've come up with in case anyone else has been dealing with the same issue.
/* =========================================================
Perspective - Prevent Text Selection / Native Dragging
Default:
- Disable text selection and native browser dragging
- Include Embedded Views, Containers, and One-Shot Buttons
Exceptions:
- Input fields and editable content
- Elements with a domId starting with "drag-allowed"
and all their descendants
Pointer Events:
- Disable only internal img / canvas / svg in Image components
- Disable decorative img / svg inside Buttons
- Keep pointer-events unchanged on components themselves
========================================================= */
/* Disable text selection and native dragging globally */
#app-container,
#app-container *:not(
[id^="drag-allowed"],
[id^="drag-allowed"] *,
input,
textarea,
[contenteditable=""],
[contenteditable=""] *,
[contenteditable="true"],
[contenteditable="true"] *,
[contenteditable="plaintext-only"],
[contenteditable="plaintext-only"] *
) {
-webkit-user-select: none !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
/* Allow text selection in editable and excluded areas */
#app-container :is(
input,
textarea,
[contenteditable=""],
[contenteditable="true"],
[contenteditable="plaintext-only"],
[id^="drag-allowed"]
) {
-webkit-user-select: text !important;
user-select: text !important;
}
/* Image components: preserve existing pointer behavior */
#app-container
[data-component="ia.display.image"]
:is(img, canvas, svg):not(
[id^="drag-allowed"],
[id^="drag-allowed"] *
) {
pointer-events: none;
}
/* Decorative images inside regular and One-Shot Buttons */
#app-container
:is(
[data-component="ia.input.button"],
[data-component="ia.input.oneshotbutton"]
)
:is(img, svg):not(
[id^="drag-allowed"],
[id^="drag-allowed"] *
) {
pointer-events: none;
}