@descope-ui/descope-combo-box 2.2.54 → 2.2.56

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.56](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.55...web-components-ui-2.2.56) (2026-02-24)
+
+## [2.2.55](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.54...web-components-ui-2.2.55) (2026-02-23)
+
+
+### Features
+
+* combo-box `require-match` ([#885](https://github.com/descope/web-components-ui/issues/885)) ([3cbbb50](https://github.com/descope/web-components-ui/commit/3cbbb5089d9f4ff7c6e8b48005664fc26fdca157))
+
 ## [2.2.54](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.53...web-components-ui-2.2.54) (2026-02-23)
 
 ## [2.2.53](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.52...web-components-ui-2.2.53) (2026-02-23)

package/e2e/descope-combo-box.spec.ts

@@ -482,3 +482,91 @@ test.describe('custom error message', () => {
     });
   });
 });
+
+test.describe('require-match', () => {
+  test('should validate pattern', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        'require-match': 'true',
+      }),
+    );
+    const componentLocator = page.locator(componentName);
+    const component = createComboBoxTestDriver(componentLocator);
+
+    await component.insertValue('xyz');
+    await component.blur();
+
+    const displayValue = await component.getDisplayValue();
+    expect(displayValue).toBe('xyz');
+
+    const actualValue = await componentLocator.evaluate(
+      (node: HTMLElement & { value: string }) => node.value,
+    );
+    expect(actualValue).toBe('');
+
+    await page.getByRole('button').getByText('Submit').click();
+
+    expect(await component.checkValidity()).toBe(false);
+
+    expect(
+      await component.screenshot({ delay: 1000, animations: 'disabled' }),
+    ).toMatchSnapshot();
+  });
+
+  test('should have custom error message for require match', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        'require-match': 'true',
+        'data-errormessage-pattern-mismatch': 'Custom error message',
+      }),
+    );
+
+    const component = createComboBoxTestDriver(page.locator(componentName));
+
+    await page.getByRole('button').getByText('Submit').click();
+
+    expect(
+      await component.screenshot({ delay: 1000, animations: 'disabled' })
+    ).toMatchSnapshot();
+  });
+
+  test('should not clear filter on blur', async ({ page }) => {
+     await page.goto(
+      getStoryUrl(storyName, {
+        'require-match': 'true',
+        'data-pattern-mismatch-missing': 'Custom error message',
+      }),
+    );
+
+    const component = createComboBoxTestDriver(page.locator(componentName));
+
+    await component.insertValue('xyz');
+    await component.blur();
+
+    expect(
+      await component.screenshot({ delay: 1000, animations: 'disabled' })
+    ).toMatchSnapshot();
+  });
+
+  test('should not override allow-custom-value', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        'require-match': 'true',
+        'allow-cuzstom-value': 'true',
+        'data-pattern-mismatch-missing': 'Custom error message',
+      }),
+    );
+
+    const component = createComboBoxTestDriver(page.locator(componentName));
+
+    await component.insertValue('allowed custom value');
+    await component.blur();
+
+    await page.getByRole('button').getByText('Submit').click();
+
+    expect(
+      await component.screenshot({ delay: 1000, animations: 'disabled' })
+    ).toMatchSnapshot();
+  });
+});
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-combo-box",
-  "version": "2.2.54",
+  "version": "2.2.56",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.1",
-    "e2e-utils": "2.2.54",
-    "test-drivers": "2.2.54"
+    "e2e-utils": "2.2.56",
+    "test-drivers": "2.2.56"
   },
   "dependencies": {
     "@vaadin/combo-box": "24.3.4",
-    "@descope-ui/common": "2.2.54",
-    "@descope-ui/theme-globals": "2.2.54",
-    "@descope-ui/theme-input-wrapper": "2.2.54"
+    "@descope-ui/common": "2.2.56",
+    "@descope-ui/theme-globals": "2.2.56",
+    "@descope-ui/theme-input-wrapper": "2.2.56"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/ComboBoxClass.js

@@ -17,6 +17,7 @@ import {
   draggableMixin,
   createProxy,
   componentNameValidationMixin,
+  inputOverrideValidConstraintsMixin,
   portalMixin,
   proxyInputMixin,
 } from '@descope-ui/common/components-mixins';
@@ -26,7 +27,7 @@ export const componentName = getComponentName('combo-box');
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
     static get observedAttributes() {
-      return ['label-type'];
+      return ['label-type', 'require-match'];
     }
 
     // eslint-disable-next-line class-methods-use-this
@@ -98,6 +99,10 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    get requireMatch() {
+      return this.getAttribute('require-match') === 'true' && !this.allowCustomValue;
+    }
+
     // eslint-disable-next-line class-methods-use-this
     isValidDataType(data) {
       const isValid = Array.isArray(data);
@@ -250,16 +255,27 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    isValueMatch() {
+      return this.baseElement.items.some(val => val.getAttribute('data-id') === this.baseElement.querySelector('input').value);
+    }
+
     init() {
       super.init?.();
 
       // eslint-disable-next-line func-names
       this.getValidity = function () {
+        if (this.requireMatch && !this.isValueMatch()) {
+          return {
+            patternMismatch: true,
+          };
+        }
+
         if (!this.value && this.isRequired) {
           return {
             valueMissing: true,
           };
         }
+
         return {};
       };
 
@@ -311,6 +327,10 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    handleRequireMatchChange(shouldValidate) {
+      this.baseElement.allowCustomValue = shouldValidate || this.allowCustomValue;
+    }
+
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -321,6 +341,8 @@ const ComboBoxMixin = (superclass) =>
           } else {
             this.removeEventListener('click', this.onLabelClick);
           }
+        } else if (attrName === 'require-match') {
+          this.handleRequireMatchChange(newValue === 'true');
         }
       }
     }
@@ -618,6 +640,7 @@ export const ComboBoxClass = compose(
     proxyProps: ['selectionStart'],
     inputEvent: 'value-changed',
   }),
+  inputOverrideValidConstraintsMixin,
   componentNameValidationMixin,
   ComboBoxMixin,
 )(

package/stories/descope-combo-box.stories.js

@@ -41,9 +41,11 @@ const Template = ({
   loading,
   'default-value': defaultValue,
   'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
   'label-type': labelType,
   'hide-toggle-button': hideToggleButton,
   'allow-custom-value': allowCustomValue,
+  'require-match': patternValidation,
   errorMsgIcon,
 }) => {
   let serializedData;
@@ -71,10 +73,12 @@ const Template = ({
       disabled="${disabled || false}"
       loading="${loading || false}"
       data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
       st-host-direction="${direction ?? ''}"
       label-type="${labelType || ''}"
       hide-toggle-button="${hideToggleButton || false}"
       allow-custom-value="${allowCustomValue || false}"
+      require-match="${patternValidation || false}"
       ${errorMsgIcon ? errorMessageIconAttrs : ''}
     >
       <span data-name="ItemName1" data-id="itemId1">Trojan War Heroes' Valor</span>
@@ -163,6 +167,10 @@ export default {
       name: 'Override the default renderer function',
       control: { type: 'boolean' },
     },
+    'require-match': {
+      name: 'Require Match',
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -180,4 +188,5 @@ Default.args = {
   ],
   itemsSource: 'children',
   'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': ''
 };