[BUG] Copying Disabled Input Field Content

[KarimAhmed-23]

Description:
Users are able to copy content from an input field that is marked as disabled. This behavior allows users to take a copy of the content even though the field should be non-interactive and should not be selectable or copied by the user.

Steps :
1- Navigate to the input component that containing a disabled input example in design system.
2- Attempt to copy the content from the input field.
3- Notice that the content can be successfully copied.

[moiz-conceptlz]

@KarimAhmed-23

The design system's purpose is to "Design" and create a consistent style in terms of the look and feel of components. At this stage, the functionality of a component is open to the implementor.

Now, refer to https://html.spec.whatwg.org/multipage/form-control-infrastructure.html and refer to 4.10.18.5 Enabling and disabling form controls

The purpose of the disabled state, as per HTML spec, is to bar the element from click events, acceptance of input, and it is barred from constraint validation.

The design system does not change the default behaviour of the element. For example, in IE and Chrome - a disabled input allows copy, but in Firefox is does not. This is the default behaviour of the browser.

If you want to implement the ability to stop a user from copying the text in all browsers, you will have to do so via JavaScript.

[moiz-conceptlz]

You may try to implement other solutions as well depending on browsers. For example; some browsers will disable copy of text from a field when you add readonly="readonly" - this is not the best solution and other issues may crop up based on the default spec of a readonly input.

The most suitable solution to implement the behaviour you want is to create a listener on the disabled state input and disallow clipboard access.

[moiz-conceptlz]

I am reopening this as a bug because there is indeed a CSS method to disable copy from a disabled input. This will be fixed in the next design system plugin release.

Although we will enable this via CSS, It would still be better to add the following JavaScript

<script>
document.querySelectorAll('input[disabled]').forEach((input) => {
  input.addEventListener('copy', (event) => {
    event.preventDefault(); // Prevent the default copy behavior
  });
});
</script>

[moiz-conceptlz]

Closing this issue, as https://github.com/TDRA-ae/aegov-dls/releases/tag/2.2.7 solves this reported issue.