@descope-ui/descope-autocomplete-field 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-02-04)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/theme-globals` updated to version `0.0.3`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.3`
+* `@descope-ui/descope-combo-box` updated to version `0.0.3`
+* `@descope-ui/common` updated to version `0.0.3`

package/e2e/descope-autocomplete.spec.ts

@@ -0,0 +1,508 @@
+import { test, expect, Page } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import createAutocompleteTestDriver from '../testDriver/autocompleteTestDriver';
+
+const storyName = 'descope-autocomplete-field';
+const componentName = 'descope-autocomplete-field';
+
+const BooleanValues = ['true', 'false'];
+
+const componentAttributes = {
+  label: 'autocomplete label',
+  placeholder: 'Test placeholder',
+  size: ['xs', 'sm', 'md', 'lg'],
+  bordered: BooleanValues,
+  readonly: BooleanValues,
+  required: BooleanValues,
+  'full-width': BooleanValues,
+  disabled: 'true',
+  'default-value': 'test value',
+};
+
+const presets = {
+  'with label and required': {
+    label: '-Label',
+    placeholder: '-Placeholder',
+    required: 'true',
+  },
+  'with floating label and required': {
+    label: '-Label',
+    placeholder: '-Placeholder',
+    required: 'true',
+    'label-type': 'floating',
+  },
+  'with label and not required': {
+    label: '-Label',
+    placeholder: '-Placeholder',
+    required: 'false',
+  },
+  'with floating label and not required': {
+    label: '-Label',
+    placeholder: '-Placeholder',
+    required: 'false',
+    'label-type': 'floating',
+  },
+};
+
+const runVisualTests = async (
+  name: string,
+  preset: Record<string, string>,
+  componentSetup?: (page: Page) => Promise<void>,
+) => {
+  test.describe(name, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      if (componentSetup) await componentSetup(page);
+    });
+
+    test('hover', async ({ page }) => {
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.hover();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('focus', async ({ page }) => {
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.focus();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+};
+
+test.describe('theme', () => {
+  const { placeholder, ...restConfig } = componentAttributes;
+
+  runVisualTests('with placeholder', { placeholder });
+
+  runVisualTests('with default-value and allow-custom-value', {
+    'default-value': 'default value',
+    'allow-custom-value': 'true',
+  });
+
+  runVisualTests('with default-value and not allow-custom-value', {
+    'default-value': 'default value',
+    'allow-custom-value': 'false',
+  });
+
+  runVisualTests('rtl with default-value', {
+    'default-value': '-default value',
+    direction: 'rtl',
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      expect(
+        await component.screenshot({ animations: 'disabled' }),
+      ).toMatchSnapshot();
+    });
+
+    test(`rtl ${name}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { ...preset, direction: 'rtl' }));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      expect(
+        await component.screenshot({ animations: 'disabled' }),
+      ).toMatchSnapshot();
+    });
+  });
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}default error message`, async ({
+      page,
+    }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          label: '-Label',
+          placeholder: '-Placeholder',
+          required: 'true',
+          direction,
+        }),
+      );
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await page.getByRole('button').getByText('Submit').click();
+      expect(
+        await component.screenshot({ timeout: 1000, animations: 'disabled' }),
+      ).toMatchSnapshot();
+    });
+  });
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}custom error message`, async ({
+      page,
+    }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          label: '-Label',
+          placeholder: '-Placeholder',
+          required: 'true',
+          'data-errormessage-value-missing': '-please fill it',
+          direction,
+        }),
+      );
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await page.getByRole('button').getByText('Submit').click();
+      expect(
+        await component.screenshot({ timeout: 1000, animations: 'disabled' }),
+      ).toMatchSnapshot();
+    });
+  });
+
+  test.describe('with value', () => {
+    loopConfig(restConfig, (attr, value) => {
+      runVisualTests(`${attr}: ${value}`, { [attr]: value }, async (page) => {
+        const component = createAutocompleteTestDriver(
+          page.locator(componentName),
+        );
+        await component.setValue('autovalue');
+      });
+    });
+  });
+
+  test.describe('dropdown', () => {
+    loopPresets(
+      {
+        'size: xs': { size: 'xs' },
+        'size: sm': { size: 'sm' },
+        'size: md': { size: 'md' },
+        'size: lg': { size: 'lg' },
+        'full-width: true': { 'full-width': 'true' },
+        'full-width: false': { 'full-width': 'false' },
+        rtl: { direction: 'rtl', 'full-width': 'true' },
+      },
+      (preset, name) => {
+        test(name, async ({ page }) => {
+          await page.goto(getStoryUrl(storyName, preset));
+          const component = createAutocompleteTestDriver(
+            page.locator(componentName),
+          );
+          await component.insertValue('fastmock');
+          const resultsLoaded = page.locator('vaadin-combo-box-item', {
+            hasText: 'The Adventures of fastmock in Wonderland',
+          });
+          await resultsLoaded.waitFor();
+          expect(await component.dropDown.screenshot()).toMatchSnapshot();
+        });
+      },
+    );
+  });
+
+  test('loading', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAutocompleteTestDriver(page.locator(componentName));
+    await component.insertValue('loadin');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'The Adventures of ',
+    });
+    await resultsLoaded.waitFor();
+    await component.insertValue('g');
+    await page.waitForTimeout(300);
+    expect(
+      await component.dropDown.screenshot({ animations: 'disabled' }),
+    ).toMatchSnapshot();
+  });
+
+  test('error message with icon', async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { required: true, errorMsgIcon: true }),
+    );
+    const component = createAutocompleteTestDriver(page.locator(componentName));
+    await page.getByRole('button').getByText('Submit').click();
+    await component.blur();
+    expect(
+      await component.screenshot({
+        animations: 'disabled',
+        caret: 'hide',
+        timeout: 3000,
+      }),
+    ).toMatchSnapshot();
+  });
+});
+
+test.describe('logic', () => {
+  test.describe('min search length', () => {
+    test('default', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('moc');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+    });
+
+    test('custom', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'min-search-length': '4' }));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fas');
+      // Need to have the timeout to wait for the results to load (or not)
+      await page.waitForTimeout(1000);
+      let items = await component.getItems();
+      expect(items.length).toBe(0);
+      await expect(component.dropDown).not.toBeVisible();
+      await component.insertValue('t');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+    });
+  });
+
+  ['', 'rtl'].forEach((direction) => {
+    test(`${!!direction ? 'rtl ' : ''}select item and clear`, async ({
+      page,
+    }) => {
+      await page.goto(getStoryUrl(storyName, { direction }));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'The Adventures of fastmock in Wonderland',
+      );
+      expect(await component.screenshot()).toMatchSnapshot();
+      await component.openDropdown();
+      expect(await component.dropDown.screenshot()).toMatchSnapshot();
+      await component.blur();
+      await component.clearSelection();
+      expect(await component.getValue()).toBe('');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test.describe('set value', () => {
+    test('allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.setValue('set value');
+      expect(await component.screenshot()).toMatchSnapshot();
+      expect(await component.getValue()).toBe('set value');
+    });
+
+    test('not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.setValue('set value');
+      expect(await component.screenshot()).toMatchSnapshot();
+      expect(await component.getValue()).toBe('set value');
+    });
+  });
+
+  test.describe('search and blur', () => {
+    test('allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock1');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('fastmock1');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const component = createAutocompleteTestDriver(
+        page.locator(componentName),
+      );
+      await component.insertValue('fastmock1');
+      const resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      const items = await component.getItems();
+      expect(items.length).toBeGreaterThan(0);
+      await expect(component.dropDown).toBeVisible();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('select - allow custom value', async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+      const locator = page.locator(componentName);
+      const component = createAutocompleteTestDriver(locator);
+      await component.insertValue('fastmock');
+      let resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'The Adventures of fastmock in Wonderland',
+      );
+      await expect(component.dropDown).not.toBeVisible();
+      await component.replaceSearchValue('fasthello');
+      resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of fasthello',
+      });
+      await resultsLoaded.waitFor();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe('fasthello');
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+
+    test('select - not allow custom value', async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, { 'allow-custom-value': 'false' }),
+      );
+      const locator = page.locator(componentName);
+      const component = createAutocompleteTestDriver(locator);
+      await component.insertValue('fastmock');
+      let resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of ',
+      });
+      await resultsLoaded.waitFor();
+      await component.selectItem('mock');
+      expect(await component.getValue()).toBe(
+        'The Adventures of fastmock in Wonderland',
+      );
+      await expect(component.dropDown).not.toBeVisible();
+      await component.replaceSearchValue('fasthello');
+      resultsLoaded = page.locator('vaadin-combo-box-item', {
+        hasText: 'The Adventures of fasthello',
+      });
+      await resultsLoaded.waitFor();
+      await page.getByRole('button').getByText('Submit').click();
+      await expect(component.dropDown).not.toBeVisible({ timeout: 1000 });
+      expect(await component.getValue()).toBe(
+        'The Adventures of fastmock in Wonderland',
+      );
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test('no results', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAutocompleteTestDriver(page.locator(componentName));
+    await component.insertValue('no ');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'No results',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+  });
+
+  test('error searching', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}));
+    const component = createAutocompleteTestDriver(page.locator(componentName));
+    await component.insertValue('error');
+    const resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'An error occurred',
+    });
+    await resultsLoaded.waitFor();
+    await expect(component.dropDown).toBeVisible();
+    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    const item = page.locator(componentName).getByRole('option').first();
+    await expect(item).toHaveAttribute('disabled', 'true');
+  });
+
+  test('error validation - allow custom value', async ({
+    page,
+    browserName,
+  }) => {
+    // The test has to be skipped for webkit because when there's an error,
+    // the component collapses and it's not visible (only in Playwright).
+    test.skip(browserName === 'webkit');
+    await page.goto(
+      getStoryUrl(storyName, {
+        'allow-custom-value': 'true',
+        required: 'true',
+      }),
+    );
+    const component = createAutocompleteTestDriver(page.locator(componentName));
+    await page.getByRole('button').getByText('Submit').click();
+    let errorMessage = page.locator('div', {
+      hasText: 'Please fill out this field.',
+    });
+    // Empty input should show error message
+    await errorMessage.nth(0).waitFor();
+
+    // Enter custom value
+    await component.insertValue('test value');
+    let resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'The Adventures of test value in Wonderland',
+    });
+    await resultsLoaded.waitFor({ timeout: 1000 });
+    // The value is not selected
+    await component.blur();
+    await page.getByRole('button').getByText('Submit').click();
+    expect(await component.getValue()).toBe('test value');
+    errorMessage = page.locator('div', {
+      hasText: 'Please fill out this field.',
+    });
+    await expect(errorMessage).not.toBeVisible();
+
+    // Clear the value and check that the error message is visible
+    await component.clearSelection();
+    await component.blur();
+    expect(await component.getValue()).toBe('');
+    await page.getByRole('button').getByText('Submit').click();
+    errorMessage = page.locator('div', {
+      hasText: 'Please fill out this field.',
+    });
+    await errorMessage.nth(0).waitFor();
+
+    // Search and select a valid value
+    await page.goto(getStoryUrl(storyName, { 'allow-custom-value': 'true' }));
+    await component.insertValue('fastmock');
+    resultsLoaded = page.locator('vaadin-combo-box-item', {
+      hasText: 'The Adventures of ',
+    });
+    await resultsLoaded.waitFor();
+    await component.selectItem('mock');
+    expect(await component.getValue()).toBe(
+      'The Adventures of fastmock in Wonderland',
+    );
+    await page.getByRole('button').getByText('Submit').click();
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@descope-ui/descope-autocomplete-field",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AutocompleteFieldClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@vaadin/custom-field": "24.3.4",
+    "@descope-ui/common": "0.0.3",
+    "@descope-ui/theme-globals": "0.0.3",
+    "@descope-ui/theme-input-wrapper": "0.0.3",
+    "@descope-ui/descope-combo-box": "0.0.3"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-autocomplete-field",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-autocomplete-field/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/AutocompleteFieldClass.js

@@ -0,0 +1,175 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import {
+  forwardAttrs,
+  getComponentName,
+  syncAttrs,
+} from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+import { ComboBoxClass } from '@descope-ui/descope-combo-box/class';
+import { componentName as descopeInternalComponentName } from './descope-autocomplete-field-internal/AutocompleteFieldInternal';
+
+export const componentName = getComponentName('autocomplete-field');
+
+const customMixin = (superclass) =>
+  class AutocompleteFieldMixinClass extends superclass {
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    setDefaultValue() {
+      if (this.defaultValue) {
+        setTimeout(() => {
+          this.inputElement.value = this.defaultValue;
+        });
+      }
+    }
+
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+        tabindex="-1"
+      ></${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(
+        descopeInternalComponentName,
+      );
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'bordered',
+          'label',
+          'required',
+          'label-type',
+          'placeholder',
+          'full-width',
+          'allow-custom-value',
+          'min-search-length',
+          'no-results-message',
+          'error-fetching-results-message',
+          'data-errormessage-value-missing',
+          'invalid',
+          'error-message',
+          'readonly',
+          'disabled',
+          'st-host-direction',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
+        ],
+      });
+
+      // This is required since when we remove the invalid attribute from the internal mappings field,
+      // we want to reflect the change in the parent component
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+      this.inputElement.fetchResults = this.fetchResults;
+      this.setDefaultValue();
+    }
+
+    set fetchResults(fetchResults) {
+      this.inputElement.fetchResults = fetchResults;
+    }
+  };
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const AutocompleteFieldClass = compose(
+  createStyleMixin({
+    componentNameOverride: getComponentName('input-wrapper'),
+  }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      fontSize: { ...host },
+      checkmarkDisplay: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
+      },
+      itemPaddingInlineStart: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlayItemPaddingInlineStart,
+      },
+      itemPaddingInlineEnd: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlayItemPaddingInlineEnd,
+      },
+      selectedItemBackground: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlaySelectedItemBackground,
+      },
+      selectedItemHoverBackground: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlaySelectedItemHoverBackground,
+      },
+      selectedItemFocusBackground: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlaySelectedItemFocusBackground,
+      },
+      itemHoverBackground: {
+        selector: ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.overlayItemHoverBackground,
+      },
+      errorMessageIcon: {
+        selector: () => ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: () => ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.errorMessageIconSize,
+      },
+      errorMessageIconPadding: {
+        selector: () => ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.errorMessageIconPadding,
+      },
+      errorMessageIconRepeat: {
+        selector: () => ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.errorMessageIconRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: () => ComboBoxClass.componentName,
+        property: ComboBoxClass.cssVarList.errorMessageIconPosition,
+      },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin,
+  customMixin,
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+      direction: ltr;
+    }
+    vaadin-custom-field {
+      line-height: unset;
+      width: 100%;
+    }
+  `,
+    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    componentName,
+  }),
+);

package/src/component/descope-autocomplete-field-internal/AutocompleteFieldInternal.js

@@ -0,0 +1,229 @@
+import { createBaseInputClass } from '@descope-ui/common/base-classes';
+import {
+  forwardAttrs,
+  getComponentName,
+  syncAttrs,
+} from '@descope-ui/common/components-helpers';
+import { asyncDebounce } from '@descope-ui/common/utils';
+
+export const componentName = getComponentName('autocomplete-field-internal');
+
+const BaseInputClass = createBaseInputClass({
+  componentName,
+  baseSelector: '',
+});
+const observedAttrs = [];
+
+const INVALID_OPTION_VALUE = 'DESCOPE_INVALID_OPTION';
+const DEBOUNCE_SEARCH_DELAY = 250;
+
+class AutocompleteFieldInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);
+  }
+
+  get allowCustomValue() {
+    return this.getAttribute('allow-custom-value') === 'true';
+  }
+
+  get minSearchLength() {
+    return this.getAttribute('min-search-length') || 3;
+  }
+
+  get noResultsFoundMessage() {
+    return this.getAttribute('no-results-message') || 'No results found';
+  }
+
+  get errorFetchingResultsMessage() {
+    return (
+      this.getAttribute('error-fetching-results-message') ||
+      'An error occurred fetching results'
+    );
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        user-select: none;
+        max-width: 100%;
+      }
+
+      :host ::slotted {
+        padding: 0;
+      }
+    </style>
+    <div class="autocomplete-field">
+      <descope-combo-box clear-button-visible="true" auto-open-disabled="true" has-dynamic-data="true" item-label-path="data-name" item-value-path="data-id" hide-toggle-button="true"></descope-combo-box>
+    </div>
+    `;
+
+    this.comboBox = this.querySelector('descope-combo-box');
+  }
+
+  get value() {
+    return this.comboBox.value;
+  }
+
+  set value(val) {
+    if (!this.allowCustomValue) {
+      this.comboBox.data = [{ label: val, value: val }];
+      setTimeout(() => {
+        this.comboBox.value = val;
+      });
+    } else {
+      this.comboBox.value = val;
+    }
+  }
+
+  get defaultValue() {
+    return this.getAttribute('default-value');
+  }
+
+  async #autoCompleteSearch(value) {
+    const { results, error } = await this.fetchResults(value);
+    if (error) {
+      return { error };
+    }
+    return {
+      results,
+    };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #itemRenderer(displayName, value, label, disabled) {
+    return `<span data-name="${label}" data-id="${value}" ${disabled ? 'disabled="true"' : ''}>${
+      displayName || label
+    }</span>`;
+  }
+
+  #overrideComboBoxRenderers() {
+    this.comboBox.renderer = (root, _, model) => {
+      if (model.item.getAttribute('disabled') === 'true') {
+        root.setAttribute('disabled', 'true');
+      } else {
+        root.removeAttribute('disabled');
+      }
+      // eslint-disable-next-line no-param-reassign
+      root.innerHTML = model.item.outerHTML;
+    };
+
+    this.comboBox.renderItem = ({ displayName, value, label, disabled }) =>
+      this.#itemRenderer(displayName, value, label, disabled);
+  }
+
+  focus() {
+    this.comboBox.focus();
+  }
+
+  init() {
+    // This event listener needs to be placed before the super.init() call
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.comboBox.focus();
+    });
+
+    super.init?.();
+    this.#initComboBox();
+    // This is required since when we remove the invalid attribute from the internal mappings field,
+    // we want to reflect the change in the parent component
+    syncAttrs(this, this.comboBox, { includeAttrs: ['invalid'] });
+  }
+
+  #initComboBox() {
+    this.debouncedSearch = asyncDebounce(async (value) => {
+      try {
+        const { results, error } = await this.#autoCompleteSearch(value);
+        return { results, error, value };
+      } catch (error) {
+        return { error, value };
+      }
+    }, DEBOUNCE_SEARCH_DELAY);
+
+    forwardAttrs(this, this.comboBox, {
+      includeAttrs: [
+        'size',
+        'bordered',
+        'label',
+        'label-type',
+        'placeholder',
+        'disabled',
+        'readonly',
+        'required',
+        'full-width',
+        'helper-text',
+        'invalid',
+        'error-message',
+        'data-errormessage-value-missing',
+        'st-host-direction',
+        'allow-custom-value',
+        'st-error-message-icon',
+        'st-error-message-icon-size',
+        'st-error-message-icon-padding',
+      ],
+    });
+
+    this.comboBox.addEventListener('filter-changed', this.onSearch.bind(this));
+    this.#overrideComboBoxRenderers();
+  }
+
+  #getEmptyResultsData() {
+    return [
+      {
+        label: this.noResultsFoundMessage,
+        value: INVALID_OPTION_VALUE,
+        disabled: true,
+      },
+    ];
+  }
+
+  #getErrorResultsData() {
+    return [
+      {
+        label: this.errorFetchingResultsMessage,
+        value: INVALID_OPTION_VALUE,
+        disabled: true,
+      },
+    ];
+  }
+
+  async onSearch(e) {
+    const searchValue = e.detail.value;
+    if (!searchValue || searchValue.length < this.minSearchLength) {
+      return;
+    }
+    this.comboBox.loading = true;
+    this.comboBox.setAttribute('opened', 'true');
+    const response = await this.debouncedSearch(searchValue);
+    if (response && response.value === searchValue) {
+      this.comboBox.loading = false;
+      if (response.error) {
+        this.comboBox.data = this.#getErrorResultsData();
+      } else if (response.results?.length === 0) {
+        this.comboBox.data = this.#getEmptyResultsData();
+      } else {
+        this.comboBox.data = response.results || [];
+      }
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  fetchResults(value) {
+    // eslint-disable-next-line no-console
+    console.warn('fetchResults', 'needs to be implemented');
+    return { results: [], error: undefined };
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    return { valid: true };
+  }
+}
+
+export default AutocompleteFieldInternal;

package/src/component/descope-autocomplete-field-internal/index.js

@@ -0,0 +1,5 @@
+import AutocompleteFieldInternal, {
+  componentName,
+} from './AutocompleteFieldInternal';
+
+customElements.define(componentName, AutocompleteFieldInternal);

package/src/component/index.js

@@ -0,0 +1,12 @@
+import '@vaadin/custom-field';
+import '@descope-ui/descope-combo-box';
+import './descope-autocomplete-field-internal';
+
+import {
+  componentName,
+  AutocompleteFieldClass,
+} from './AutocompleteFieldClass';
+
+customElements.define(componentName, AutocompleteFieldClass);
+
+export { AutocompleteFieldClass, componentName };

package/src/theme.js

@@ -0,0 +1,34 @@
+import globals from '@descope-ui/theme-globals';
+import { AutocompleteFieldClass } from './component/AutocompleteFieldClass';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { refs } from '@descope-ui/theme-input-wrapper';
+
+const vars = AutocompleteFieldClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+const autocompleteField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.checkmarkDisplay]: 'none',
+  [vars.itemPaddingInlineStart]: globalRefs.spacing.lg,
+  [vars.itemPaddingInlineEnd]: globalRefs.spacing.lg,
+  [vars.selectedItemBackground]: globalRefs.colors.primary.light,
+  [vars.selectedItemHoverBackground]: globalRefs.colors.primary.light,
+  [vars.selectedItemFocusBackground]: globalRefs.colors.primary.light,
+  [vars.itemHoverBackground]: globalRefs.colors.primary.highlight,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default autocompleteField;
+export { vars };

package/stories/descope-autocomplete-field.stories.js

@@ -0,0 +1,151 @@
+import { componentName } from '../src/component';
+
+import { withForm } from '@descope-ui/common/sb-helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+} from '@descope-ui/common/sb-controls';
+
+const mockFetchResults = function (query) {
+  return new Promise((resolve, reject) => {
+    let lowerQuery = query.toLowerCase();
+    const results = [
+      {
+        id: 'book-1',
+        value: 'The Lord of the Sample Rings: The Fellowship of the Ring',
+      },
+      { id: 'book-2', value: "Harry Mock and the Philosopher's Stone" },
+      { id: 'book-3', value: 'One Hundred Years of Test Mock' },
+      { id: 'book-4', value: "The Hitchhiker's Example to the Galaxy Mock" },
+      { id: 'book-5', value: 'Pride and Prejudice and Zombies Mock' },
+    ];
+
+    if (!lowerQuery.startsWith('no')) {
+      results.unshift({
+        id: 'book-dynamic',
+        value: `The Adventures of ${query} in Wonderland`,
+      });
+    }
+
+    let responseDelay = 100 + Math.random() * 200;
+    if (lowerQuery.startsWith('loading')) {
+      responseDelay = 5000;
+    } else if (lowerQuery.startsWith('fast')) {
+      responseDelay = 0;
+      lowerQuery = lowerQuery.replace('fast', '');
+    }
+
+    if (lowerQuery.startsWith('error')) {
+      setTimeout(() => {
+        reject({
+          error: 'something went wrong',
+        });
+      }, responseDelay);
+    } else {
+      setTimeout(() => {
+        resolve({
+          results: results
+            .filter((value) => value.value.toLowerCase().includes(lowerQuery))
+            .map((value) => ({
+              label: value.value,
+              value: value.value,
+            })),
+        });
+      }, responseDelay);
+    }
+  });
+};
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  'default-value': defaultValue,
+  'full-width': fullWidth,
+  'label-type': labelType,
+  'data-errormessage-value-missing': customErrorMessage,
+  'allow-custom-value': allowCustomValue,
+  'min-search-length': minSearchLength,
+  errorMsgIcon,
+}) => {
+  const overrideFetchResultsScript = `
+  <script>
+    document.querySelector("descope-autocomplete-field").fetchResults = ${mockFetchResults}
+  </script>`;
+
+  return withForm(`
+      <descope-autocomplete-field
+        size="${size}"
+        bordered="${bordered}"
+        label="${label || ''}"
+        label-type="${labelType || ''}"
+        disabled="${disabled || false}"
+        placeholder="${placeholder || ''}"
+        readonly="${readonly || false}"
+        required="${required || false}"
+        full-width="${fullWidth || false}"
+        st-host-direction="${direction ?? ''}"
+        default-value="${defaultValue || ''}"
+        data-errormessage-value-missing="${customErrorMessage || ''}"
+        allow-custom-value="${allowCustomValue || false}"
+        min-search-length="${minSearchLength || ''}"
+        ${errorMsgIcon ? errorMessageIconAttrs : ''}
+      ></descope-autocomplete-field>
+      ${overrideFetchResultsScript}
+  `);
+};
+
+export default {
+  component: componentName,
+  title: 'descope-autocomplete-field',
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    'min-search-length': {
+      name: 'Min Search Length',
+      control: { type: 'number' },
+    },
+    'allow-custom-value': {
+      name: 'Allow Custom Value',
+      control: { type: 'boolean' },
+    },
+    ...errorMessageIconControl,
+    'default-value': {
+      name: 'Default Value',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  bordered: true,
+  size: 'md',
+  'allow-custom-value': false,
+};

package/testDriver/autocompleteTestDriver.ts

@@ -0,0 +1,49 @@
+import { Locator } from '@playwright/test';
+import { createComponentTestDriver, createInputTestDriver } from 'test-drivers';
+
+const createAutocompleteTestDriver = (locator: Locator) => {
+  const clearButton = locator.locator('#clearButton');
+  const dropDown = locator.getByRole('listbox');
+
+  return {
+    ...createComponentTestDriver(locator),
+    ...createInputTestDriver(locator),
+
+    async focus() {
+      await locator.evaluate((node: HTMLInputElement) => {
+        node.focus();
+      });
+    },
+
+    selectItem(text: string) {
+      return dropDown.getByText(text).first().click();
+    },
+
+    async openDropdown() {
+      await locator.page().keyboard.press('ArrowDown');
+    },
+
+    async clearSelection() {
+      await clearButton.click();
+    },
+
+    async replaceSearchValue(value: string) {
+      await locator
+        .page()
+        .keyboard.press(
+          `${process.platform === 'darwin' ? 'Meta' : 'Control'}+A`,
+        );
+      await locator.page().keyboard.press('Backspace');
+      await locator.page().keyboard.type(value);
+    },
+
+    async getItems() {
+      const items = await dropDown.getByRole('option').all();
+      return Promise.all(items.map((item) => item.textContent()));
+    },
+
+    dropDown,
+  };
+};
+
+export default createAutocompleteTestDriver;