HTML 5 data-* attributes fix for case sensitive variable names

Created on 17 September 2023, over 1 year ago
Updated 18 September 2023, over 1 year ago

Problem/Motivation

Some of the field widget configurations don't work because the configuration details are passed as data-* attributes on the canvas element but they don't adhere to HTML5 standards that require all attributes to be lowercase. As a result when the JavaScript in the attach behavior tries to get the settings via $(this).data() the configuration options such as perColor are returned as pencolor which is not a recognized attribute for SignaturePad and as therefore ignored.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Steps to reproduce

Using FF 116+ or Chrome 117+ and Drupal 9.5+ add an image field to a content type, set the form widget to 'Sign', customize the pen color to blue, and save the form settings. Next try to create a new instance of the content type and sign the form. Note that the signature appears as black ink on a white background instead of blue ink on a white background.

Proposed resolution

Convert the attributes to adhere to HTML5 formatted data-* attributes.

Remaining tasks

Review and test the proposed patch

User interface changes

None

API changes

None

Data model changes

None

πŸ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States d.clarke

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024