feat(combo-box): add inputProps in web components (carbon-design-system#21501)

* feat(combo-box): add inputProps in web components

* chore(combobox): clean comments

Author: heloiselui

packages/web-components/src/components/combo-box/combo-box.stories.ts

@@ -71,6 +71,7 @@ const defaultArgs = {
   value: '',
   warn: false,
   warnText: 'Warning message goes here',
+  inputProps: undefined,
 };
 
 const controls = {
@@ -104,6 +105,10 @@ const controls = {
     control: 'text',
     description: `Message which is displayed if the value is invalid.`,
   },
+  inputProps: {
+    control: 'object',
+    description: `Specify native input attributes to place on the internal input, for example \`{ maxlength: 5, autocomplete: 'off'}\`.`,
+  },
   label: {
     control: 'text',
     description: `The default content of the trigger button.`,
@@ -145,6 +150,7 @@ export const Default = {
     ...defaultArgs,
     helperText: 'Helper text',
     titleText: 'Label',
+    inputProps: {},
   },
   render: (args) => {
     const {
@@ -164,9 +170,11 @@ export const Default = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <cds-combo-box
+        .inputProps=${inputProps}
         ?disabled=${disabled}
         ?autoalign=${autoalign}
         helper-text=${ifDefined(helperText)}
@@ -253,10 +261,11 @@ export const AllowCustomValue = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <cds-combo-box
-        allow-custom-value="true"
+        .inputProps=${inputProps}
         direction=${ifDefined(direction)}
         ?disabled=${disabled}
         ?autoalign=${autoalign}
@@ -313,9 +322,11 @@ export const AutocompleteWithTypeahead = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <cds-combo-box
+        .inputProps=${inputProps}
         direction=${ifDefined(direction)}
         ?disabled=${disabled}
         ?autoalign=${autoalign}
@@ -373,11 +384,13 @@ export const ExperimentalAutoAlign = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <div style="width:400px">
         <div style="height: 300px"></div>
         <cds-combo-box
+          .inputProps=${inputProps}
           ?autoalign=${autoalign}
           direction=${ifDefined(direction)}
           ?disabled=${disabled}
@@ -434,6 +447,7 @@ export const Controlled = {
       titleText,
       type,
       typeahead,
+      inputProps,
       value,
       warn,
       warnText,
@@ -476,6 +490,7 @@ export const Controlled = {
 
     return html`
       <cds-combo-box
+        .inputProps=${inputProps}
         controlled
         direction=${ifDefined(direction)}
         ?autoalign=${autoalign}
@@ -537,9 +552,11 @@ export const WithAILabel = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <cds-combo-box
+        .inputProps=${inputProps}
         ?disabled=${disabled}
         ?autoalign=${autoalign}
         ?hide-label=${hideLabel}
@@ -599,11 +616,13 @@ export const WithLayer = {
       invalidText,
       value,
       typeahead,
+      inputProps,
     } = args ?? {};
     return html`
       <sb-template-layers>
         <div style="width:300px">
           <cds-combo-box
+            .inputProps=${inputProps}
             direction=${ifDefined(direction)}
             ?autoalign=${autoalign}
             ?disabled=${disabled}

packages/web-components/src/components/combo-box/combo-box.ts

@@ -18,6 +18,7 @@ import styles from './combo-box.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
+import spread from '../../globals/directives/spread';
 
 export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';
 
@@ -416,6 +417,7 @@ class CDSComboBox extends CDSDropdown {
       open,
       readOnly,
       value,
+      inputProps,
       _activeDescendant: activeDescendant,
       _filterInputValue: filterInputValue,
       _handleInput: handleInput,
@@ -453,7 +455,8 @@ class CDSComboBox extends CDSDropdown {
         )}"
         ?readonly=${readOnly}
         @input=${handleInput}
-        @keydown=${handleInputKeydown} />
+        @keydown=${handleInputKeydown}
+        ...="${spread(this._normalizeInputProps(inputProps))}" />
     `;
   }
 
@@ -553,6 +556,29 @@ class CDSComboBox extends CDSDropdown {
   @property({ type: Boolean, attribute: 'allow-custom-value' })
   allowCustomValue = false;
 
+  /**
+   * Additional input attributes to apply to the internal input element.
+   * Allows passing native HTML input attributes like `maxlength`, `pattern`,
+   * `autocomplete`, etc.
+   */
+  @property({ type: Object, attribute: false })
+  inputProps?: Record<string, string | number | boolean>;
+
+  private _normalizeInputProps(
+    inputProps?: Record<string, string | number | boolean>
+  ) {
+    const normalizedInputProps: Record<string, string> = {};
+
+    Object.entries(inputProps ?? {}).forEach(([key, value]) => {
+      if (value === undefined || value === null || value === false) {
+        return;
+      }
+      normalizedInputProps[key] = value === true ? '' : String(value);
+    });
+
+    return normalizedInputProps;
+  }
+
   shouldUpdate(changedProperties) {
     super.shouldUpdate(changedProperties);
     if (!changedProperties.has('value')) {