Issue 53451: JS error when deleting numeric filter values with Between operator

Author: cnathe

packages/components/releaseNotes/components.md

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version TBD
+*Released*: TBD
+- Issue 53451: JS error when deleting numeric filter values with Between operator
+
 ### version 6.56.0
 *Released*: 11 July 2025
 - Package updates

packages/components/src/internal/components/search/utils.test.ts

@@ -4,7 +4,7 @@ import { QueryInfo } from '../../../public/QueryInfo';
 import { QueryColumn } from '../../../public/QueryColumn';
 import { SCHEMAS } from '../../schemas';
 
-import { TEXT_TYPE } from '../domainproperties/PropDescType';
+import { INTEGER_TYPE, TEXT_TYPE } from '../domainproperties/PropDescType';
 
 import { NOT_ANY_FILTER_TYPE } from '../../url/NotAnyFilterType';
 
@@ -370,6 +370,12 @@ describe('getUpdateFilterExpressionFilter', () => {
         jsonType: 'string',
         fieldKey,
     });
+    const integerField = new QueryColumn({
+        name: 'integerField',
+        rangeURI: INTEGER_TYPE.rangeURI,
+        jsonType: 'int',
+        fieldKey: 'integerField',
+    });
 
     const anyOp = {
         betweenOperator: false,
@@ -446,24 +452,36 @@ describe('getUpdateFilterExpressionFilter', () => {
         expect(getUpdateFilterExpressionFilter(betweenOp, stringField, 'x', 'z', 'a')).toStrictEqual(
             Filter.create(fieldKey, 'a,z', Filter.Types.BETWEEN)
         );
+        expect(getUpdateFilterExpressionFilter(betweenOp, integerField, 1, 100, 11)).toStrictEqual(
+            Filter.create(integerField.fieldKey, '11,100', Filter.Types.BETWEEN)
+        );
     });
 
     test('update between filter second value', () => {
         expect(getUpdateFilterExpressionFilter(betweenOp, stringField, null, null, 'y', true)).toStrictEqual(
             Filter.create(fieldKey, 'y', Filter.Types.BETWEEN)
         );
+        expect(getUpdateFilterExpressionFilter(betweenOp, integerField, null, null, 11, true)).toStrictEqual(
+            Filter.create(integerField.fieldKey, '11', Filter.Types.BETWEEN)
+        );
     });
 
     test('remove between filter second value', () => {
         expect(getUpdateFilterExpressionFilter(betweenOp, stringField, 'x', 'z', null, true)).toStrictEqual(
             Filter.create(fieldKey, 'x', Filter.Types.BETWEEN)
         );
+        expect(getUpdateFilterExpressionFilter(betweenOp, integerField, 10, 100, null, true)).toStrictEqual(
+            Filter.create(integerField.fieldKey, '10', Filter.Types.BETWEEN)
+        );
     });
 
     test('clear between filter values', () => {
         expect(getUpdateFilterExpressionFilter(betweenOp, stringField, 'x', 'z', null, null, true)).toStrictEqual(
             Filter.create(fieldKey, null, Filter.Types.BETWEEN)
         );
+        expect(getUpdateFilterExpressionFilter(betweenOp, integerField, 10, 100, null, null, true)).toStrictEqual(
+            Filter.create(integerField.fieldKey, null, Filter.Types.BETWEEN)
+        );
     });
 
     test('in filter type with value string', () => {

packages/components/src/internal/components/search/utils.ts

@@ -251,13 +251,15 @@ export function getUpdateFilterExpressionFilter(
                 value = null;
             } else if (isSecondValue) {
                 if (newFilterValue == null) {
-                    value = previousFirstFilterValue != null ? previousFirstFilterValue : '';
+                    value = previousFirstFilterValue != null ? previousFirstFilterValue.toString() : '';
                 } else {
-                    value = (previousFirstFilterValue != null ? previousFirstFilterValue + ',' : '') + newFilterValue;
+                    value =
+                        (previousFirstFilterValue != null ? previousFirstFilterValue + ',' : '') +
+                        newFilterValue.toString();
                 }
             } else {
                 if (newFilterValue == null) {
-                    value = previousSecondFilterValue != null ? previousSecondFilterValue : '';
+                    value = previousSecondFilterValue != null ? previousSecondFilterValue.toString() : '';
                 } else {
                     value = newFilterValue + (previousSecondFilterValue != null ? ',' + previousSecondFilterValue : '');
                 }