Issue 52556: Add data-fieldkey attribute to grid header elements and input elements

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "6.40.0",
+  "version": "6.40.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 6.40.1
+*Released*: 6 May 2025
+- Issue 52556: Add data-fieldkey attribute to grid header elements and input elements
+
 ### version 6.40.0
 *Released*: 5 May 2025
 - Issue 52504: Expose validate lookup setting for sample lookup and turn on by default

packages/components/src/internal/components/ColumnSelectionModal.test.tsx

@@ -52,7 +52,7 @@ describe('ColumnSelectionModal', () => {
 
         test('isInView', () => {
             render(<ColumnChoice {...defaultProps()} isInView />);
-            expect(document.querySelector('.field-name').textContent).toBe('Test Column');
+            expect(document.querySelector('.field-caption').textContent).toBe('Test Column');
             expect(document.querySelectorAll('.fa-check')).toHaveLength(1);
             expect(document.querySelectorAll('.fa-plus')).toHaveLength(0);
             expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(1);
@@ -62,7 +62,7 @@ describe('ColumnSelectionModal', () => {
 
         test('not isInView', () => {
             render(<ColumnChoice {...defaultProps()} isInView={false} />);
-            expect(document.querySelector('.field-name').textContent).toBe('Test Column');
+            expect(document.querySelector('.field-caption').textContent).toBe('Test Column');
             expect(document.querySelectorAll('.fa-check')).toHaveLength(0);
             expect(document.querySelectorAll('.fa-plus')).toHaveLength(1);
             expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(1);
@@ -72,7 +72,7 @@ describe('ColumnSelectionModal', () => {
 
         test('lookup, collapsed', () => {
             render(<ColumnChoice {...defaultProps()} column={QUERY_COL_LOOKUP} isInView={false} />);
-            expect(document.querySelector('.field-name').textContent).toBe('Test Column');
+            expect(document.querySelector('.field-caption').textContent).toBe('Test Column');
             expect(document.querySelectorAll('.fa-check')).toHaveLength(0);
             expect(document.querySelectorAll('.fa-plus')).toHaveLength(1);
             expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(3);
@@ -82,7 +82,7 @@ describe('ColumnSelectionModal', () => {
 
         test('lookup, expanded', () => {
             render(<ColumnChoice {...defaultProps()} column={QUERY_COL_LOOKUP} isExpanded isInView={false} />);
-            expect(document.querySelector('.field-name').textContent).toBe('Test Column');
+            expect(document.querySelector('.field-caption').textContent).toBe('Test Column');
             expect(document.querySelectorAll('.fa-check')).toHaveLength(0);
             expect(document.querySelectorAll('.fa-plus')).toHaveLength(1);
             expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(3);
@@ -116,7 +116,7 @@ describe('ColumnSelectionModal', () => {
         }
 
         function validate(column: QueryColumn, deleteDisabled: boolean): void {
-            expect(document.querySelector('.field-name span').textContent).toBe(column.caption);
+            expect(document.querySelector('.field-caption span').textContent).toBe(column.caption);
             const removeIcon = document.querySelector('.fa-times');
             if (deleteDisabled) {
                 expect(removeIcon).toBeFalsy();
@@ -184,21 +184,21 @@ describe('ColumnSelectionModal', () => {
     describe('FieldLabelDisplay', () => {
         test('not lookup', () => {
             render(<FieldLabelDisplay column={QUERY_COL} includeFieldKey />);
-            expect(document.querySelector('.field-name span').textContent).toBe(QUERY_COL.caption);
+            expect(document.querySelector('.field-caption span').textContent).toBe(QUERY_COL.caption);
             expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(1);
             expect(document.querySelectorAll('input')).toHaveLength(0);
         });
 
         test('is lookup', () => {
             render(<FieldLabelDisplay column={QUERY_COL_LOOKUP} includeFieldKey />);
-            expect(document.querySelectorAll('.field-name span')).toHaveLength(1);
+            expect(document.querySelectorAll('.field-caption span')).toHaveLength(1);
             expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(1);
             expect(document.querySelectorAll('input')).toHaveLength(0);
         });
 
         test('is lookup, do not include fieldKey', () => {
             render(<FieldLabelDisplay column={QUERY_COL_LOOKUP} />);
-            expect(document.querySelectorAll('.field-name')).toHaveLength(1);
+            expect(document.querySelectorAll('.field-caption')).toHaveLength(1);
             expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(0);
             expect(document.querySelectorAll('input')).toHaveLength(0);
         });

packages/components/src/internal/components/ColumnSelectionModal.tsx

@@ -74,11 +74,11 @@ export const FieldLabelDisplay: FC<FieldLabelDisplayProps> = memo(props => {
     }
     // Issue 46256: use encoded fieldKeyPath, Issue 49795: show tooltip more often to account for renamed fields, etc.
     if (!includeFieldKey) {
-        return <div className="field-name">{initialTitle}</div>;
+        return <div className="field-caption">{initialTitle}</div>;
     }
 
     return (
-        <OverlayTrigger className="field-name" overlay={popover}>
+        <OverlayTrigger className="field-caption" overlay={popover}>
             <span>{initialTitle}</span>
         </OverlayTrigger>
     );
@@ -296,6 +296,7 @@ export const ColumnInView: FC<ColumnInViewProps> = memo(props => {
             {(dragProvided, snapshot) => (
                 <div
                     className={classNames('list-group-item flex draggable', { active: selected && !editing })}
+                    data-fieldkey={column.fieldKeyPath}
                     onClick={_onClick}
                     ref={dragProvided.innerRef}
                     {...dragProvided.draggableProps}

packages/components/src/internal/components/__snapshots__/PreviewGrid.test.tsx.snap

@@ -40,6 +40,7 @@ exports[`PreviewGrid render PreviewGrid with data 1`] = `
           <tr>
             <th
               class="grid-header-cell"
+              data-fieldkey="Name"
               draggable="false"
               id="Name"
               title="Contains a short name for this data object
@@ -50,6 +51,7 @@ null (Name)"
             </th>
             <th
               class="grid-header-cell"
+              data-fieldkey="Flag"
               draggable="false"
               id="Flag"
               title="Contains a reference to a user-editable comment about this row (Flag)"
@@ -58,6 +60,7 @@ null (Name)"
             </th>
             <th
               class="grid-header-cell"
+              data-fieldkey="mixtureTypeId"
               draggable="false"
               id="mixtureTypeId"
               title="mixtureTypeId"
@@ -66,6 +69,7 @@ null (Name)"
             </th>
             <th
               class="grid-header-cell"
+              data-fieldkey="expirationTime"
               draggable="false"
               id="expirationTime"
               title="The expiration period in days. (expirationTime)"
@@ -223,6 +227,7 @@ exports[`PreviewGrid render PreviewGrid with different numCols and numRows 1`] =
           <tr>
             <th
               class="grid-header-cell"
+              data-fieldkey="Name"
               draggable="false"
               id="Name"
               title="Contains a short name for this data object
@@ -233,6 +238,7 @@ null (Name)"
             </th>
             <th
               class="grid-header-cell"
+              data-fieldkey="Flag"
               draggable="false"
               id="Flag"
               title="Contains a reference to a user-editable comment about this row (Flag)"

packages/components/src/internal/components/base/Grid.tsx

@@ -212,6 +212,7 @@ export class GridHeader extends PureComponent<GridHeaderProps, State> {
                                         onDragEnter={this.handleDragEnter}
                                         onDragEnd={this.handleDragEnd}
                                         onClick={this.handleHeaderClick}
+                                        data-fieldkey={column.raw?.fieldKeyPath}
                                     >
                                         {headerCell ? headerCell(column, i, columns.size) : title}
                                         {/* headerCell will render the helpTip, so only render here if not using headerCell() */}

packages/components/src/internal/components/forms/FieldLabel.tsx

@@ -90,7 +90,7 @@ export class FieldLabel extends Component<FieldLabelProps> {
                     <span className={classNames(toggleContainerClassName)}>
                         <div className={classNames(toggleClassName, toggleWrapperClassName)}>
                             <ToggleIcon
-                                id={id ?? column?.fieldKey}
+                                id={(id ?? column?.fieldKey) + '::toggle'}
                                 inputFieldName={getFieldEnabledFieldName(column, fieldName)}
                                 active={!isDisabled ? 'on' : 'off'}
                                 onClick={toggleProps?.onClick}

packages/components/src/internal/components/forms/detail/DetailDisplay.tsx

@@ -106,7 +106,7 @@ function processFields(
         return fields.set(
             fieldKey,
             new DetailField({
-                fieldKey,
+                fieldKey: c.fieldKey,
                 title: c.caption,
                 renderer:
                     detailRenderer?.(c, options, fileInputRenderer, onAdditionalFormDataChange) ?? _defaultRenderer(c),

packages/components/src/internal/components/forms/input/CheckboxInput.tsx

@@ -109,7 +109,7 @@ class CheckboxInputImpl extends DisableableInput<CheckboxInputImplProps, Checkbo
         return (
             <div className={`${containerClassName} checkbox-input-form-row`}>
                 {renderFieldLabel ? (
-                    <label className={labelClassName}>
+                    <label className={labelClassName} htmlFor={queryColumn.fieldKey}>
                         {renderFieldLabel(queryColumn)}
                         {queryColumn?.required && <span className="required-symbol"> *</span>}
                     </label>
@@ -133,6 +133,7 @@ class CheckboxInputImpl extends DisableableInput<CheckboxInputImplProps, Checkbo
                 <div className={wrapperClassName}>
                     <input
                         disabled={isDisabled}
+                        id={queryColumn.fieldKey}
                         name={queryColumn.fieldKey}
                         // Issue 43299: Ignore "required" property for boolean columns as this will
                         // cause any false value (i.e. unchecked) to prevent submission.

packages/components/src/internal/components/forms/input/DatePickerInput.tsx

@@ -300,7 +300,7 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         return (
             <div className={containerClassName}>
                 {renderFieldLabel ? (
-                    <label className={labelClassName}>
+                    <label className={labelClassName} htmlFor={queryColumn.fieldKey}>
                         {renderFieldLabel(queryColumn)}
                         {queryColumn?.required && <span className="required-symbol"> *</span>}
                     </label>
@@ -309,7 +309,7 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                         label={label}
                         labelOverlayProps={{
                             isFormsy: false,
-                            inputId: queryColumn.name,
+                            inputId: queryColumn.fieldKey,
                             required: queryColumn.required,
                             addLabelAsterisk,
                             labelClass: allowDisable ? undefined : labelClassName,

packages/components/src/internal/components/forms/input/SelectInput.tsx

@@ -497,7 +497,7 @@ export class SelectInputImpl extends Component<SelectInputImplProps, State> {
 
                 if (renderFieldLabel) {
                     return (
-                        <label className={labelClass}>
+                        <label className={labelClass} htmlFor={name}>
                             {renderFieldLabel(undefined, label, description_)}
                             {required && <span className="required-symbol"> *</span>}
                         </label>

packages/components/src/internal/components/search/QueryFilterPanel.tsx

@@ -262,8 +262,8 @@ export const QueryFilterPanel: FC<Props> = memo(props => {
                                     <ChoicesListItem
                                         active={currFieldKey === activeFieldKey}
                                         index={index}
-                                        key={currFieldKey}
-                                        label={caption}
+                                        key={field.fieldKeyPath}
+                                        label={<div data-fieldkey={field.fieldKeyPath}>{caption}</div>}
                                         onSelect={() => onFieldClick(field)}
                                         componentRight={
                                             hasFilters(field) && <span className="pull-right field-modal__field_dot" />

packages/components/src/public/QueryModel/CustomizeGridViewModal.test.tsx

@@ -191,13 +191,13 @@ describe('CustomizeGridViewModal', () => {
         expect(colsInView[1].getAttribute('class')).toContain('active');
 
         // clicking a new column should change the selected index
-        await userEvent.click(colsInView[0].querySelector('.field-name span'));
+        await userEvent.click(colsInView[0].querySelector('.field-caption span'));
         colsInView = document.querySelectorAll('.list-group')[1].querySelectorAll('.list-group-item');
         expect(colsInView[0].getAttribute('class')).toContain('active');
         expect(colsInView[1].getAttribute('class')).not.toContain('active');
 
         // clicking on the same column should unselect
-        await userEvent.click(colsInView[0].querySelector('.field-name span'));
+        await userEvent.click(colsInView[0].querySelector('.field-caption span'));
         colsInView = document.querySelectorAll('.list-group')[1].querySelectorAll('.list-group-item');
         expect(colsInView[0].getAttribute('class')).not.toContain('active');
         expect(colsInView[1].getAttribute('class')).not.toContain('active');

packages/components/src/theme/filter.scss

@@ -22,7 +22,7 @@
         font-weight: bold;
     }
 
-    .list-group-item .field-name {
+    .list-group-item .field-caption {
         flex: 1;
         cursor: default;
     }